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

Skip to content

Commit ed9381e

Browse files
antoinergantoinerg
committed
indicator: background container to bgcolor, borderwidth, bordercolor
1 parent fcc9a94 commit ed9381e

File tree

5 files changed

+71
-64
lines changed

5 files changed

+71
-64
lines changed

‎src/traces/indicator/attributes.js

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -134,11 +134,27 @@ module.exports = {
134134
'Set the shape of the gauge'
135135
].join(' ')
136136
},
137-
background: extendFlat({}, gaugeArcAttr, {
138-
description: [
139-
'Set the appearance of the gauge\'s background'
140-
].join(' ')
141-
}),
137+
bgcolor: {
138+
valType: 'color',
139+
role: 'style',
140+
editType: 'legend',
141+
description: 'Sets the gauge background color.'
142+
},
143+
bordercolor: {
144+
valType: 'color',
145+
dflt: colorAttrs.defaultLine,
146+
role: 'style',
147+
editType: 'legend',
148+
description: 'Sets the color of the border enclosing the gauge.'
149+
},
150+
borderwidth: {
151+
valType: 'number',
152+
min: 0,
153+
dflt: 0,
154+
role: 'style',
155+
editType: 'legend',
156+
description: 'Sets the width (in px) of the border enclosing the gauge.'
157+
},
142158
value: extendDeep({}, gaugeArcAttr, {
143159
color: {dflt: 'green'},
144160
size: {

‎src/traces/indicator/defaults.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
4444
return Lib.coerce(gaugeIn, gaugeOut, attributes.gauge, attr, dflt);
4545
}
4646
coerceGauge('shape');
47-
coerceGauge('background.color');
48-
coerceGauge('background.line.color');
49-
coerceGauge('background.line.width');
47+
coerceGauge('bgcolor');
48+
coerceGauge('borderwidth');
49+
coerceGauge('bordercolor');
5050
coerceGauge('value.color');
5151
coerceGauge('value.line.color');
5252
coerceGauge('value.line.width');

‎src/traces/indicator/plot.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
117117
bignumberVerticalMargin = size.t + size.h / 2;
118118
deltaVerticalMargin = Math.min(size.t + size.h / 2 + mainFontSize / 2 + deltaFontSize / 2);
119119
} else {
120-
mainFontSize = Math.min(size.w / (trace.max.toString().length + 2), size.h / 3);
120+
mainFontSize = Math.min(size.w / (trace.max.toString().length + 1), size.h / 3);
121121
deltaFontSize = mainFontSize;
122122
bignumberVerticalMargin = 0;
123123
deltaVerticalMargin = size.t + size.h / 2;
@@ -268,9 +268,9 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
268268
var bgArc = gauge.selectAll('g.bgArc').data(cd);
269269
bgArc.enter().append('g').classed('bgArc', true).append('path');
270270
bgArc.select('path').attr('d', arcPath.endAngle(theta))
271-
.style('fill', trace.gauge.background.color)
272-
.style('stroke', trace.gauge.background.line.color)
273-
.style('stroke-width', trace.gauge.background.line.width);
271+
.style('fill', trace.gauge.bgcolor)
272+
.style('stroke', trace.gauge.bordercolor)
273+
.style('stroke-width', trace.gauge.borderwidth);
274274
bgArc.exit().remove();
275275

276276
// Draw target
@@ -425,9 +425,9 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
425425
bgBullet.select('rect')
426426
.attr('width', scale(trace.max))
427427
.attr('height', bulletHeight)
428-
.style('fill', trace.gauge.background.color)
429-
.style('stroke', trace.gauge.background.line.color)
430-
.style('stroke-width', trace.gauge.background.line.width);
428+
.style('fill', trace.gauge.bgcolor)
429+
.style('stroke', trace.gauge.bordercolor)
430+
.style('stroke-width', trace.gauge.borderwidth);
431431
bgBullet.exit().remove();
432432

433433
var targetBullet = bullet.selectAll('g.targetBullet').data(cd);

‎test/image/mocks/indicator_bullet.json

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
22
"data": [{
3-
"domain": {"y": [0, 0.33]},
3+
"domain": {
4+
"y": [0, 0.33]
5+
},
46
"name": "<b>Revenue</b><br><span style='color: gray; font-size:0.8em'>U.S. $ (1,000s)</span>",
57
"type": "indicator",
68
"mode": "bignumber+gauge",
@@ -14,13 +16,9 @@
1416
"size": 0.75,
1517
"value": 170
1618
},
17-
"background": {
18-
"color": "rgba(0, 0, 0, 0.1)",
19-
"line": {
20-
"width": 2,
21-
"color": "rgba(0, 0, 0, 0.1)"
22-
}
23-
},
19+
"bgcolor": "rgba(0, 0, 0, 0.1)",
20+
"borderwidth": 2,
21+
"bordercolor": "rgba(0, 0, 0, 0.1)",
2422
"target": {
2523
"color": "rgba(0, 0, 0, 0.25)"
2624
},
@@ -30,7 +28,9 @@
3028
},
3129
"values": [125, 180]
3230
}, {
33-
"domain": {"y": [0.33, 0.66]},
31+
"domain": {
32+
"y": [0.33, 0.66]
33+
},
3434
"name": "<b>Profit</b><br><span style='color: gray; font-size:0.8em'>%</span>",
3535
"type": "indicator",
3636
"mode": "bignumber+gauge",
@@ -44,13 +44,9 @@
4444
"size": 0.75,
4545
"value": 50
4646
},
47-
"background": {
48-
"color": "rgba(0, 0, 0, 0.1)",
49-
"line": {
50-
"width": 2,
51-
"color": "rgba(0, 0, 0, 0.1)"
52-
}
53-
},
47+
"bgcolor": "rgba(0, 0, 0, 0.1)",
48+
"borderwidth": 2,
49+
"bordercolor": "rgba(0, 0, 0, 0.1)",
5450
"target": {
5551
"color": "rgba(0, 0, 0, 0.25)"
5652
},
@@ -61,7 +57,9 @@
6157
"values": [25, 35],
6258
"valueformat": "0"
6359
}, {
64-
"domain": {"y": [0.66, 1]},
60+
"domain": {
61+
"y": [0.66, 1]
62+
},
6563
"name": "<b>Avg Order Size</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>",
6664
"type": "indicator",
6765
"mode": "bignumber+gauge",
@@ -75,13 +73,9 @@
7573
"height": 0.75,
7674
"value": 210
7775
},
78-
"background": {
79-
"color": "rgba(0, 0, 0, 0.1)",
80-
"line": {
81-
"width": 2,
82-
"color": "rgba(0, 0, 0, 0.1)"
83-
}
84-
},
76+
"bgcolor": "rgba(0, 0, 0, 0.1)",
77+
"borderwidth": 2,
78+
"bordercolor": "rgba(0, 0, 0, 0.1)",
8579
"target": {
8680
"color": "rgba(0, 0, 0, 0.25)"
8781
},

‎test/image/mocks/indicator_gauge.json

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"data": [{
3-
"domain": {"x": [0, 0.474], "y": [0, 1]},
3+
"domain": {
4+
"x": [0, 0.474],
5+
"y": [0, 1]
6+
},
47
"values": [400, 450],
58
"name": "Speed",
69
"type": "indicator",
@@ -11,13 +14,9 @@
1114
"max": 500,
1215
"target": 475,
1316
"gauge": {
14-
"background": {
15-
"color": "rgba(255, 255, 255, 0.25)",
16-
"line": {
17-
"width": 2,
18-
"color": "rgba(255, 255, 255, 0.5)"
19-
}
20-
},
17+
"bgcolor": "rgba(255, 255, 255, 0.25)",
18+
"borderwidth": 2,
19+
"bordercolor": "rgba(255, 255, 255, 0.5)",
2120
"target": {
2221
"color": "rgba(255, 255, 0, 0.5)"
2322
},
@@ -29,7 +28,10 @@
2928
}
3029
}
3130
}, {
32-
"domain": {"x": [0.474, 0.789], "y": [0, 0.666]},
31+
"domain": {
32+
"x": [0.474, 0.789],
33+
"y": [0, 0.666]
34+
},
3335
"values": [400, 450],
3436
"name": "Speed",
3537
"type": "indicator",
@@ -40,13 +42,9 @@
4042
"max": 500,
4143
"target": 475,
4244
"gauge": {
43-
"background": {
44-
"color": "rgba(255, 255, 255, 0.25)",
45-
"line": {
46-
"width": 2,
47-
"color": "rgba(255, 255, 255, 0.5)"
48-
}
49-
},
45+
"bgcolor": "rgba(255, 255, 255, 0.25)",
46+
"borderwidth": 2,
47+
"bordercolor": "rgba(255, 255, 255, 0.5)",
5048
"target": {
5149
"color": "rgba(255, 255, 0, 0.5)"
5250
},
@@ -57,8 +55,11 @@
5755
"value": 100
5856
}
5957
}
60-
},{
61-
"domain": {"x": [0.789, 1], "y": [0, 0.333]},
58+
}, {
59+
"domain": {
60+
"x": [0.789, 1],
61+
"y": [0, 0.333]
62+
},
6263
"values": [400, 450],
6364
"name": "Speed",
6465
"type": "indicator",
@@ -69,13 +70,9 @@
6970
"max": 500,
7071
"target": 475,
7172
"gauge": {
72-
"background": {
73-
"color": "rgba(255, 255, 255, 0.25)",
74-
"line": {
75-
"width": 2,
76-
"color": "rgba(255, 255, 255, 0.5)"
77-
}
78-
},
73+
"bgcolor": "rgba(255, 255, 255, 0.25)",
74+
"borderwidth": 2,
75+
"bordercolor": "rgba(255, 255, 255, 0.5)",
7976
"target": {
8077
"color": "rgba(255, 255, 0, 0.5)"
8178
},

0 commit comments

Comments
 (0)