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

Skip to content

Commit 16ace21

Browse files
antoinergantoinerg
committed
indicator: second draft of attributes
1 parent 34c73bf commit 16ace21

File tree

5 files changed

+37
-34
lines changed

5 files changed

+37
-34
lines changed

‎src/traces/indicator/attributes.js

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ var gaugeArcAttr = {
6363

6464
module.exports = {
6565
mode: {
66-
valType: 'enumerated',
66+
valType: 'flaglist',
6767
editType: 'calc',
6868
role: 'info',
69-
values: ['gauge', 'bignumber', 'sparkline', 'bullet'],
69+
flags: ['bignumber', 'delta', 'gauge'],
7070
dflt: 'bignumber'
7171
},
7272
values: {
@@ -121,16 +121,7 @@ module.exports = {
121121
].join(' ')
122122
}),
123123

124-
ticker: {
125-
showticker: {
126-
valType: 'boolean',
127-
editType: 'style',
128-
role: 'style',
129-
dflt: false,
130-
description: [
131-
'Show a ticker'
132-
].join(' ')
133-
},
124+
delta: {
134125
showpercentage: {
135126
valType: 'boolean',
136127
editType: 'style',
@@ -143,6 +134,16 @@ module.exports = {
143134
editType: 'style'
144135
},
145136
gauge: {
137+
shape: {
138+
valType: 'enumerated',
139+
editType: 'style',
140+
role: 'style',
141+
dflt: 'circular',
142+
values: ['circular', 'bullet'],
143+
description: [
144+
'Set the shape of the gauge'
145+
].join(' ')
146+
},
146147
background: extendFlat({}, gaugeArcAttr, {
147148
description: [
148149
'Set the appearance of the gauge\'s background'

‎src/traces/indicator/defaults.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
4242
function coerceGauge(attr, dflt) {
4343
return Lib.coerce(gaugeIn, gaugeOut, attributes.gauge, attr, dflt);
4444
}
45+
coerceGauge('shape');
4546
coerceGauge('background.color');
4647
coerceGauge('background.line.color');
4748
coerceGauge('background.line.width');
@@ -53,6 +54,5 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
5354
coerceGauge('target.line.width');
5455

5556
// ticker attributes
56-
coerce('ticker.showticker');
57-
coerce('ticker.showpercentage');
57+
coerce('delta.showpercentage');
5858
};

‎src/traces/indicator/plot.js

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

50-
var hasTicker = trace.ticker.showticker;
51-
52-
var fmt = d3.format('.3s');
53-
var tickerPercentFmt = d3.format('2%');
54-
55-
// var size = fullLayout._size;
5650
var domain = trace.domain;
5751
var size = Lib.extendFlat({}, fullLayout._size, {
5852
w: fullLayout._size.w * (domain.x[1] - domain.x[0]),
@@ -65,17 +59,21 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
6559
var centerX = size.l + size.w / 2;
6660

6761
// bignumber
68-
var isBigNumber = trace.mode === 'bignumber';
62+
var isBigNumber = trace.mode.indexOf('bignumber') !== -1;
63+
var fmt = d3.format('.3s');
64+
65+
// delta
66+
var hasTicker = trace.mode.indexOf('delta') !== -1;
67+
var tickerPercentFmt = d3.format('2%');
6968

7069
// trendline
7170
var hasSparkline = trace.mode === 'sparkline';
7271
if(hasSparkline) isBigNumber = true;
7372

74-
// bullet
75-
var isBullet = trace.mode === 'bullet';
76-
7773
// gauge related
78-
var isGauge = trace.mode === 'gauge';
74+
var isGauge = trace.mode.indexOf('gauge') !== -1 && trace.gauge.shape === 'circular';
75+
var isBullet = trace.mode.indexOf('gauge') !== -1 && trace.gauge.shape === 'bullet';
76+
7977
var theta = Math.PI / 2;
8078
var radius = Math.min(size.w / 2, size.h * 0.75);
8179
var innerRadius = cn.innerRadius * radius;
@@ -96,7 +94,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
9694
mainFontSize = Math.min(2 * innerRadius / (trace.max.toString().length));
9795
tickerFontSize = 0.35 * mainFontSize;
9896
}
99-
if(isBigNumber) {
97+
if(isBigNumber && !isGauge) {
10098
// Center the text
10199
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
102100
verticalMargin = size.t + size.h / 2;
@@ -108,6 +106,10 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
108106
verticalMargin = size.t + size.h / 2;
109107
tickerFontSize = 0.5 * mainFontSize;
110108
}
109+
if(hasTicker && !isBigNumber) {
110+
mainFontSize = Math.min(size.w / (trace.max.toString().length), size.h / 2);
111+
tickerFontSize = mainFontSize;
112+
}
111113
gaugeFontSize = Math.max(0.25 * mainFontSize, (radius - innerRadius) / 4);
112114

113115
plotGroup.each(function() {
@@ -130,7 +132,8 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
130132
sparkline.exit().remove();
131133

132134
// bignumber
133-
var number = d3.select(this).selectAll('text.number').data(cd);
135+
data = cd.filter(function() {return isBigNumber;});
136+
var number = d3.select(this).selectAll('text.number').data(data);
134137
number.enter().append('text').classed('number', true);
135138

136139
number.attr({
@@ -193,7 +196,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
193196
return d.delta > 0 ? 'green' : 'red';
194197
})
195198
.text(function(d) {
196-
var value = trace.ticker.showpercentage ? tickerPercentFmt(d.relativeDelta) : fmt(d.delta);
199+
var value = trace.delta.showpercentage ? tickerPercentFmt(d.relativeDelta) : fmt(d.delta);
197200
return (d.delta > 0 ? cn.DIRSYMBOL.increasing : cn.DIRSYMBOL.decreasing) + value;
198201
});
199202
ticker.exit().remove();

‎test/image/mocks/indicator_bignumber.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
"data": [{
33
"name": "Accounts",
44
"type": "indicator",
5-
"mode": "bignumber",
6-
"ticker": {
7-
"showticker": true,
5+
"mode": "bignumber+delta",
6+
"delta": {
87
"showpercentage": true
98
},
109
"max": 500,

‎test/image/mocks/indicator_gauge.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
"data": [{
33
"name": "Speed",
44
"type": "indicator",
5-
"mode": "gauge",
6-
"ticker": {
7-
"showticker": true
5+
"mode": "gauge+delta",
6+
"delta": {
7+
"showpercentage": true
88
},
99
"max": 500,
1010
"target": 475,

0 commit comments

Comments
 (0)