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

Skip to content

Commit 52d8692

Browse files
antoinergantoinerg
committed
indicator: allow multiple steps in gauge
1 parent 0b113b1 commit 52d8692

File tree

7 files changed

+110
-58
lines changed

7 files changed

+110
-58
lines changed

‎src/traces/indicator/attributes.js

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ var extendDeep = require('../../lib/extend').extendDeep;
1616
var fontAttrs = require('../../plots/font_attributes');
1717
var colorAttrs = require('../../components/color/attributes');
1818
var domainAttrs = require('../../plots/domain').attributes;
19+
var templatedArray = require('../../plot_api/plot_template').templatedArray;
1920
var cn = require('./constants.js');
2021

2122
var textFontAttrs = fontAttrs({
@@ -27,7 +28,7 @@ var textFontAttrs = fontAttrs({
2728
delete(textFontAttrs.size); // TODO: relative size?
2829

2930
// TODO: choose appropriate editType
30-
var gaugeArcAttr = {
31+
var gaugeBarAttrs = {
3132
color: {
3233
valType: 'color',
3334
editType: 'style',
@@ -62,6 +63,31 @@ var gaugeArcAttr = {
6263
editType: 'calc'
6364
};
6465

66+
var stepsAttrs = templatedArray('target', extendDeep({}, gaugeBarAttrs, {
67+
range: {
68+
valType: 'info_array',
69+
role: 'info',
70+
items: [
71+
{valType: 'number', editType: 'axrange'},
72+
{valType: 'number', editType: 'axrange'}
73+
],
74+
editType: 'axrange',
75+
// impliedEdits: {'autorange': false},
76+
description: [
77+
'Sets the range of this axis.',
78+
'If the axis `type` is *log*, then you must take the log of your',
79+
'desired range (e.g. to set the range from 1 to 100,',
80+
'set the range from 0 to 2).',
81+
'If the axis `type` is *date*, it should be date strings,',
82+
'like date data, though Date objects and unix milliseconds',
83+
'will be accepted and converted to strings.',
84+
'If the axis `type` is *category*, it should be numbers,',
85+
'using the scale where each category is assigned a serial',
86+
'number from zero in the order it appears.'
87+
].join(' ')
88+
}
89+
}));
90+
6591
module.exports = {
6692
mode: {
6793
valType: 'flaglist',
@@ -105,15 +131,6 @@ module.exports = {
105131
'Sets the maximum value of the gauge.'
106132
].join(' ')
107133
},
108-
target: {
109-
valType: 'number',
110-
editType: 'calc',
111-
dflt: 0,
112-
role: 'info',
113-
description: [
114-
'Sets a target value.'
115-
].join(' ')
116-
},
117134

118135
// position
119136
domain: domainAttrs({name: 'indicator', trace: true, editType: 'calc'}),
@@ -155,7 +172,7 @@ module.exports = {
155172
editType: 'legend',
156173
description: 'Sets the width (in px) of the border enclosing the gauge.'
157174
},
158-
value: extendDeep({}, gaugeArcAttr, {
175+
value: extendDeep({}, gaugeBarAttrs, {
159176
color: {dflt: 'green'},
160177
size: {
161178
valType: 'number',
@@ -171,11 +188,7 @@ module.exports = {
171188
'Set the appearance of the gauge\'s value'
172189
].join(' ')
173190
}),
174-
target: extendFlat({}, gaugeArcAttr, {
175-
description: [
176-
'Set the appearance of the gauge\'s target'
177-
].join(' ')
178-
}),
191+
steps: stepsAttrs,
179192
threshold: {
180193
color: {
181194
valType: 'color',

‎src/traces/indicator/defaults.js

Lines changed: 20 additions & 5 deletions
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 handleArrayContainerDefaults = require('../../plots/array_container_defaults');
1516
var cn = require('./constants.js');
1617
// var handleDomainDefaults = require('../../plots/domain').defaults;
1718
// var handleText = require('../bar/defaults').handleText;
@@ -26,8 +27,6 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
2627
coerce('valueformat');
2728
coerce('min');
2829
coerce('max', 1.5 * traceOut.values[traceOut.values.length - 1]);
29-
coerce('target');
30-
if(traceOut.target > traceOut.max) traceOut.target = traceOut.max;
3130

3231
handleDomainDefaults(traceOut, layout, coerce);
3332

@@ -58,9 +57,14 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
5857
coerceGauge('value.size', defaultValueSize);
5958

6059
// Gauge steps
61-
coerceGauge('target.color');
62-
coerceGauge('target.line.color');
63-
coerceGauge('target.line.width');
60+
if(gaugeIn && gaugeIn.steps) {
61+
handleArrayContainerDefaults(gaugeIn, gaugeOut, {
62+
name: 'steps',
63+
handleItemDefaults: targetDefaults
64+
});
65+
} else {
66+
gaugeOut.steps = [];
67+
}
6468

6569
// Gauge thresholds
6670
coerceGauge('threshold.value');
@@ -75,6 +79,17 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
7579
coerce('delta.decreasing.color');
7680
}
7781

82+
function targetDefaults(valueIn, valueOut) {
83+
function coerce(attr, dflt) {
84+
return Lib.coerce(valueIn, valueOut, attributes.gauge.steps, attr, dflt);
85+
}
86+
87+
coerce('color');
88+
coerce('line.color');
89+
coerce('line.width');
90+
coerce('range');
91+
}
92+
7893
module.exports = {
7994
supplyDefaults: supplyDefaults
8095
};

‎src/traces/indicator/plot.js

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -273,15 +273,18 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
273273
.style('stroke-width', trace.gauge.borderwidth);
274274
bgArc.exit().remove();
275275

276-
// Draw target
277-
var thetaTarget = -theta;
278-
if(trace.target) thetaTarget = valueToAngle(trace.target);
279-
var targetArc = gauge.selectAll('g.targetArc').data(cd);
276+
// Draw steps
277+
var targetArc = gauge.selectAll('g.targetArc').data(trace.gauge.steps);
280278
targetArc.enter().append('g').classed('targetArc', true).append('path');
281-
targetArc.select('path').attr('d', arcPath.endAngle(thetaTarget))
282-
.style('fill', trace.gauge.target.color)
283-
.style('stroke', trace.gauge.target.line.color)
284-
.style('stroke-width', trace.gauge.target.line.width);
279+
targetArc.select('path')
280+
.attr('d', function(d) {
281+
return arcPath
282+
.startAngle(valueToAngle(d.range[0]))
283+
.endAngle(valueToAngle(d.range[1]))();
284+
})
285+
.style('fill', function(d) { return d.color;})
286+
.style('stroke', function(d) { return d.line.color;})
287+
.style('stroke-width', function(d) { return d.line.width;});
285288
targetArc.exit().remove();
286289

287290
// Draw foreground with transition
@@ -420,6 +423,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
420423
var scale = d3.scale.linear().domain([trace.min, trace.max]).range([0, bulletWidth * size.w]);
421424

422425
// TODO: prevent rect width from being negative
426+
// TODO: prevent rect position to overflow background
423427
var bgBullet = bullet.selectAll('g.bgBullet').data(cd);
424428
bgBullet.enter().append('g').classed('bgBullet', true).append('rect');
425429
bgBullet.select('rect')
@@ -430,14 +434,15 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
430434
.style('stroke-width', trace.gauge.borderwidth);
431435
bgBullet.exit().remove();
432436

433-
var targetBullet = bullet.selectAll('g.targetBullet').data(cd);
437+
var targetBullet = bullet.selectAll('g.targetBullet').data(trace.gauge.steps);
434438
targetBullet.enter().append('g').classed('targetBullet', true).append('rect');
435439
targetBullet.select('rect')
436-
.attr('width', scale(trace.target))
440+
.attr('width', function(d) { return scale(d.range[1] - d.range[0]);})
441+
.attr('x', function(d) { return scale(d.range[0]);})
437442
.attr('height', bulletHeight)
438-
.style('fill', trace.gauge.target.color)
439-
.style('stroke', trace.gauge.target.line.color)
440-
.style('stroke-width', trace.gauge.target.line.width);
443+
.style('fill', function(d) { return d.color;})
444+
.style('stroke', function(d) { return d.line.color;})
445+
.style('stroke-width', function(d) { return d.line.width;});
441446
targetBullet.exit().remove();
442447

443448
var fgBullet = bullet.selectAll('g.fgBullet').data(cd);

‎test/image/baselines/indicator_bullet.png

55 Bytes
Loading

‎test/image/baselines/indicator_gauge.png

256 Bytes
Loading

‎test/image/mocks/indicator_bullet.json

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
"type": "indicator",
88
"mode": "bignumber+gauge",
99
"max": 300,
10-
"target": 150,
1110
"gauge": {
1211
"shape": "bullet",
1312
"threshold": {
@@ -19,9 +18,13 @@
1918
"bgcolor": "rgba(0, 0, 0, 0.1)",
2019
"borderwidth": 2,
2120
"bordercolor": "rgba(0, 0, 0, 0.1)",
22-
"target": {
21+
"steps": [{
22+
"range": [0, 150],
23+
"color": "rgba(0, 0, 0, 0.5)"
24+
}, {
25+
"range": [150, 250],
2326
"color": "rgba(0, 0, 0, 0.25)"
24-
},
27+
}],
2528
"value": {
2629
"color": "rgba(0, 0, 0, 1)"
2730
}
@@ -47,9 +50,13 @@
4750
"bgcolor": "rgba(0, 0, 0, 0.1)",
4851
"borderwidth": 2,
4952
"bordercolor": "rgba(0, 0, 0, 0.1)",
50-
"target": {
53+
"steps": [{
54+
"range": [0, 25],
55+
"color": "rgba(0, 0, 0, 0.5)"
56+
}, {
57+
"range": [25, 75],
5158
"color": "rgba(0, 0, 0, 0.25)"
52-
},
59+
}],
5360
"value": {
5461
"color": "rgba(0, 0, 0, 1)"
5562
}
@@ -64,7 +71,6 @@
6471
"type": "indicator",
6572
"mode": "bignumber+gauge",
6673
"max": 300,
67-
"target": 150,
6874
"gauge": {
6975
"shape": "bullet",
7076
"threshold": {
@@ -76,9 +82,13 @@
7682
"bgcolor": "rgba(0, 0, 0, 0.1)",
7783
"borderwidth": 2,
7884
"bordercolor": "rgba(0, 0, 0, 0.1)",
79-
"target": {
85+
"steps": [{
86+
"range": [0, 150],
87+
"color": "rgba(0, 0, 0, 0.5)"
88+
}, {
89+
"range": [150, 250],
8090
"color": "rgba(0, 0, 0, 0.25)"
81-
},
91+
}],
8292
"value": {
8393
"color": "rgba(0, 0, 0, 1)"
8494
}

‎test/image/mocks/indicator_gauge.json

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,22 @@
1212
"showticker": true
1313
},
1414
"max": 500,
15-
"target": 475,
1615
"gauge": {
1716
"bgcolor": "rgba(255, 255, 255, 0.25)",
1817
"borderwidth": 2,
1918
"bordercolor": "rgba(255, 255, 255, 0.5)",
20-
"target": {
19+
"steps": [{
20+
"range": [0, 250],
2121
"color": "rgba(255, 255, 0, 0.5)"
22-
},
22+
}, {
23+
"range": [250, 400],
24+
"color": "rgba(0, 0, 255, 0.75)"
25+
}],
2326
"threshold": {
24-
"color": "rgba(0, 0, 255, 1)",
27+
"color": "rgba(255, 0, 0, 1)",
2528
"width": 4,
26-
"size": 0.75,
27-
"value": 100
29+
"height": 0.75,
30+
"value": 490
2831
}
2932
}
3033
}, {
@@ -40,19 +43,22 @@
4043
"showticker": true
4144
},
4245
"max": 500,
43-
"target": 475,
4446
"gauge": {
4547
"bgcolor": "rgba(255, 255, 255, 0.25)",
4648
"borderwidth": 2,
4749
"bordercolor": "rgba(255, 255, 255, 0.5)",
48-
"target": {
50+
"steps": [{
51+
"range": [0, 250],
4952
"color": "rgba(255, 255, 0, 0.5)"
50-
},
53+
}, {
54+
"range": [250, 400],
55+
"color": "rgba(0, 0, 255, 0.75)"
56+
}],
5157
"threshold": {
52-
"color": "rgba(0, 0, 255, 1)",
58+
"color": "rgba(255, 0, 0, 1)",
5359
"width": 4,
5460
"height": 0.75,
55-
"value": 100
61+
"value": 490
5662
}
5763
}
5864
}, {
@@ -68,19 +74,22 @@
6874
"showticker": true
6975
},
7076
"max": 500,
71-
"target": 475,
7277
"gauge": {
7378
"bgcolor": "rgba(255, 255, 255, 0.25)",
7479
"borderwidth": 2,
7580
"bordercolor": "rgba(255, 255, 255, 0.5)",
76-
"target": {
81+
"steps": [{
82+
"range": [0, 250],
7783
"color": "rgba(255, 255, 0, 0.5)"
78-
},
84+
}, {
85+
"range": [250, 400],
86+
"color": "rgba(0, 0, 255, 0.75)"
87+
}],
7988
"threshold": {
80-
"color": "rgba(0, 0, 255, 1)",
89+
"color": "rgba(255, 0, 0, 1)",
8190
"width": 4,
8291
"height": 0.75,
83-
"value": 100
92+
"value": 490
8493
}
8594
}
8695
}],

0 commit comments

Comments
 (0)