Skip to content

Commit 95de457

Browse files
antoinergantoinerg
committed
🔪 v(min|max) for gauge.axis.range, rename gauge.value to gauge.bar
1 parent aa6ba8f commit 95de457

File tree

7 files changed

+110
-103
lines changed

7 files changed

+110
-103
lines changed

‎src/traces/indicator/attributes.js

+31-61
Original file line numberDiff line numberDiff line change
@@ -68,29 +68,30 @@ var gaugeBarAttrs = {
6868
editType: 'calc'
6969
};
7070

71-
var stepsAttrs = templatedArray('threshold', extendDeep({}, gaugeBarAttrs, {
72-
range: {
73-
valType: 'info_array',
74-
role: 'info',
75-
items: [
71+
var rangeAttr = {
72+
valType: 'info_array',
73+
role: 'info',
74+
items: [
7675
{valType: 'number', editType: 'plot'},
7776
{valType: 'number', editType: 'plot'}
78-
],
79-
editType: 'plot',
80-
// impliedEdits: {'autorange': false},
81-
description: [
82-
'Sets the range of this axis.',
83-
'If the axis `type` is *log*, then you must take the log of your',
84-
'desired range (e.g. to set the range from 1 to 100,',
85-
'set the range from 0 to 2).',
86-
'If the axis `type` is *date*, it should be date strings,',
87-
'like date data, though Date objects and unix milliseconds',
88-
'will be accepted and converted to strings.',
89-
'If the axis `type` is *category*, it should be numbers,',
90-
'using the scale where each category is assigned a serial',
91-
'number from zero in the order it appears.'
92-
].join(' ')
93-
}
77+
],
78+
editType: 'plot',
79+
description: [
80+
'Sets the range of this axis.',
81+
'If the axis `type` is *log*, then you must take the log of your',
82+
'desired range (e.g. to set the range from 1 to 100,',
83+
'set the range from 0 to 2).',
84+
'If the axis `type` is *date*, it should be date strings,',
85+
'like date data, though Date objects and unix milliseconds',
86+
'will be accepted and converted to strings.',
87+
'If the axis `type` is *category*, it should be numbers,',
88+
'using the scale where each category is assigned a serial',
89+
'number from zero in the order it appears.'
90+
].join(' ')
91+
};
92+
93+
var stepsAttrs = templatedArray('steps', extendDeep({}, gaugeBarAttrs, {
94+
range: rangeAttr
9495
}));
9596

9697
module.exports = {
@@ -130,24 +131,6 @@ module.exports = {
130131
// position
131132
domain: domainAttrs({name: 'indicator', trace: true, editType: 'calc'}),
132133

133-
vmin: {
134-
valType: 'number',
135-
editType: 'calc',
136-
role: 'info',
137-
dflt: 0,
138-
description: [
139-
'Sets the minimum value of the gauge.'
140-
].join(' ')
141-
},
142-
vmax: {
143-
valType: 'number',
144-
editType: 'calc',
145-
role: 'info',
146-
description: [
147-
'Sets the maximum value of the gauge.'
148-
].join(' ')
149-
},
150-
151134
title: {
152135
text: {
153136
valType: 'string',
@@ -311,7 +294,7 @@ module.exports = {
311294
'Set the shape of the gauge'
312295
].join(' ')
313296
},
314-
value: extendDeep({}, gaugeBarAttrs, {
297+
bar: extendDeep({}, gaugeBarAttrs, {
315298
color: {dflt: 'green'},
316299
description: [
317300
'Set the appearance of the gauge\'s value'
@@ -340,7 +323,8 @@ module.exports = {
340323
description: 'Sets the width (in px) of the border enclosing the gauge.'
341324
},
342325
axis: overrideAll({
343-
visible: extendDeep({}, axesAttrs.visible, {
326+
range: rangeAttr,
327+
visible: extendFlat({}, axesAttrs.visible, {
344328
dflt: true
345329
}),
346330
// tick and title properties named and function exactly as in axes
@@ -374,38 +358,24 @@ module.exports = {
374358
steps: stepsAttrs,
375359
threshold: {
376360
line: {
377-
color: {
378-
valType: 'color',
379-
role: 'info',
380-
dflt: colorAttrs.defaultLine,
381-
editType: 'plot',
361+
color: extendFlat({}, gaugeBarAttrs.line.color, {
382362
description: [
383363
'Sets the color of the threshold line.'
384364
].join(' ')
385-
},
386-
width: {
387-
valType: 'number',
388-
role: 'info',
389-
min: 0,
390-
dflt: 1,
391-
editType: 'plot',
365+
}),
366+
width: extendFlat({}, gaugeBarAttrs.line.width, {
392367
description: [
393368
'Sets the width (in px) of the threshold line.'
394369
].join(' ')
395-
},
370+
}),
396371
editType: 'plot'
397372
},
398-
thickness: {
399-
valType: 'number',
400-
role: 'info',
401-
min: 0,
402-
max: 1,
373+
thickness: extendFlat({}, gaugeBarAttrs.thickness, {
403374
dflt: 0.85,
404-
editType: 'plot',
405375
description: [
406376
'Sets the thickness of the threshold line as a fraction of the thickness of the gauge.'
407377
].join(' ')
408-
},
378+
}),
409379
value: {
410380
valType: 'number',
411381
editType: 'calc',

‎src/traces/indicator/defaults.js

+10-11
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
3333
traceOut._hasGauge = traceOut.mode.indexOf('gauge') !== -1;
3434

3535
coerce('value');
36-
coerce('vmin');
37-
coerce('vmax', 1.5 * traceOut.value);
3836

3937
// Number attributes
4038
var auto = new Array(2);
@@ -44,7 +42,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
4442
coerce('number.font.color', layout.font.color);
4543
coerce('number.font.family', layout.font.family);
4644
coerce('number.font.size');
47-
if(!traceOut.number.font.size) {
45+
if(traceOut.number.font.size === undefined) {
4846
traceOut.number.font.size = cn.defaultNumberFontSize;
4947
auto[0] = true;
5048
}
@@ -59,7 +57,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
5957
coerce('delta.font.color', layout.font.color);
6058
coerce('delta.font.family', layout.font.family);
6159
coerce('delta.font.size');
62-
if(!traceOut.delta.font.size) {
60+
if(traceOut.delta.font.size === undefined) {
6361
traceOut.delta.font.size = (traceOut._hasNumber ? 0.5 : 1) * (bignumberFontSize || cn.defaultNumberFontSize);
6462
auto[1] = true;
6563
}
@@ -107,12 +105,12 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
107105
coerceGauge('borderwidth');
108106
coerceGauge('bordercolor');
109107

110-
// gauge value indicator
111-
coerceGauge('value.color');
112-
coerceGauge('value.line.color');
113-
coerceGauge('value.line.width');
114-
var defaultValueThickness = cn.valueThickness * (traceOut.gauge.shape === 'bullet' ? 0.5 : 1);
115-
coerceGauge('value.thickness', defaultValueThickness);
108+
// gauge bar indicator
109+
coerceGauge('bar.color');
110+
coerceGauge('bar.line.color');
111+
coerceGauge('bar.line.width');
112+
var defaultBarThickness = cn.valueThickness * (traceOut.gauge.shape === 'bullet' ? 0.5 : 1);
113+
coerceGauge('bar.thickness', defaultBarThickness);
116114

117115
// Gauge steps
118116
if(gaugeIn && gaugeIn.steps) {
@@ -135,8 +133,9 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
135133
if(gaugeIn) axisIn = gaugeIn.axis || {};
136134
axisOut = Template.newContainer(gaugeOut, 'axis');
137135
coerceGaugeAxis('visible');
138-
handleTickValueDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear');
136+
coerceGaugeAxis('range', [0, 1.5 * traceOut.value]);
139137

138+
handleTickValueDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear');
140139
var opts = {outerTicks: false, font: layout.font};
141140
handleTickLabelDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear', opts);
142141
handleTickMarkDefaults(axisIn, axisOut, coerceGaugeAxis, 'linear', opts);

‎src/traces/indicator/plot.js

+15-14
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
122122
var gaugeBg, gaugeOutline;
123123
if(hasGauge) {
124124
gaugeBg = {
125-
range: [trace.vmin, trace.vmax],
125+
range: trace.gauge.axis.range,
126126
color: trace.gauge.bgcolor,
127127
line: {
128128
color: trace.gauge.bordercolor,
@@ -132,7 +132,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
132132
};
133133

134134
gaugeOutline = {
135-
range: [trace.vmin, trace.vmax],
135+
range: trace.gauge.axis.range,
136136
color: 'rgba(0, 0, 0, 0)',
137137
line: {
138138
color: trace.gauge.bordercolor,
@@ -251,11 +251,11 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
251251

252252
// Draw bullet
253253
var bulletHeight = size.h; // use all vertical domain
254-
var innerBulletHeight = trace.gauge.value.thickness * bulletHeight;
254+
var innerBulletHeight = trace.gauge.bar.thickness * bulletHeight;
255255
var bulletLeft = domain.x[0];
256256
var bulletRight = domain.x[0] + (domain.x[1] - domain.x[0]) * ((trace._hasNumber || trace._hasDelta) ? (1 - cn.bulletNumberDomainSize) : 1);
257257

258-
ax = mockAxis(gd, opts, [trace.vmin, trace.vmax]);
258+
ax = mockAxis(gd, opts, trace.gauge.axis.range);
259259
ax._id = 'xbulletaxis';
260260
ax.domain = [bulletLeft, bulletRight];
261261
ax.setScale();
@@ -299,7 +299,7 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
299299
targetBullet.exit().remove();
300300

301301
// Draw value bar with transitions
302-
var fgBullet = bullet.selectAll('g.fg-bullet').data([trace.gauge.value]);
302+
var fgBullet = bullet.selectAll('g.fg-bullet').data([trace.gauge.bar]);
303303
fgBullet.enter().append('g').classed('fg-bullet', true).append('rect');
304304
fgBullet.select('rect')
305305
.attr('height', innerBulletHeight)
@@ -312,10 +312,10 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
312312
.ease(transitionOpts.easing)
313313
.each('end', function() { onComplete && onComplete(); })
314314
.each('interrupt', function() { onComplete && onComplete(); })
315-
.attr('width', Math.max(0, ax.c2p(Math.min(trace.vmax, cd[0].y))));
315+
.attr('width', Math.max(0, ax.c2p(Math.min(trace.gauge.axis.range[1], cd[0].y))));
316316
} else {
317317
fgBullet.select('rect')
318-
.attr('width', Math.max(0, ax.c2p(Math.min(trace.vmax, cd[0].y))));
318+
.attr('width', Math.max(0, ax.c2p(Math.min(trace.gauge.axis.range[1], cd[0].y))));
319319
}
320320
fgBullet.exit().remove();
321321

@@ -358,7 +358,9 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
358358
// circular gauge
359359
var theta = Math.PI / 2;
360360
function valueToAngle(v) {
361-
var angle = (v - trace.vmin) / (trace.vmax - trace.vmin) * Math.PI - theta;
361+
var min = trace.gauge.axis.range[0];
362+
var max = trace.gauge.axis.range[1];
363+
var angle = (v - min) / (max - min) * Math.PI - theta;
362364
if(angle < -theta) return -theta;
363365
if(angle > theta) return theta;
364366
return angle;
@@ -395,7 +397,7 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
395397

396398
ax = mockAxis(gd, opts);
397399
ax.type = 'linear';
398-
ax.range = [trace.vmin, trace.vmax];
400+
ax.range = trace.gauge.axis.range;
399401
ax._id = 'xangularaxis'; // or 'y', but I don't think this makes a difference here
400402
ax.setScale();
401403

@@ -480,8 +482,8 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
480482
targetArc.select('path').call(drawArc).call(styleShape);
481483
targetArc.exit().remove();
482484
// Draw foreground with transition
483-
var valueArcPath = arcPathGenerator(trace.gauge.value.thickness);
484-
var fgArc = angularGauge.selectAll('g.fg-arc').data([trace.gauge.value]);
485+
var valueArcPath = arcPathGenerator(trace.gauge.bar.thickness);
486+
var fgArc = angularGauge.selectAll('g.fg-arc').data([trace.gauge.bar]);
485487
fgArc.enter().append('g').classed('fgarc', true).append('path');
486488
var fgArcPath = fgArc.select('path');
487489
if(hasTransition) {
@@ -540,8 +542,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
540542
}
541543
deltaDy -= MID_SHIFT * deltaFontSize;
542544

543-
var numbers = plotGroup.selectAll('text.numbers').data(cd);
544-
numbers.enter().append('text').classed('numbers', true);
545+
var numbers = Lib.ensureSingle(plotGroup, 'text', 'numbers');
545546

546547
var data = [];
547548
if(trace._hasNumber) data.push('number');
@@ -615,7 +616,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
615616
var delta = numbers.select('tspan.delta');
616617
delta
617618
.call(Drawing.font, trace.delta.font)
618-
.each(function(d) { Color.fill(d3.select(this), deltaFill(d));})
619+
.each(function() { Color.fill(d3.select(this), deltaFill(cd[0]));})
619620
.attr('x', deltaX)
620621
.attr('dy', deltaDy);
621622

‎test/image/baselines/indicator_bignumber.png

482 Bytes
Loading

‎test/image/mocks/indicator_bullet.json

+12-6
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
},
1111
"type": "indicator",
1212
"mode": "number+gauge+delta",
13-
"vmax": 300,
1413
"delta": {"reference": 200, "position": "right"},
1514
"gauge": {
1615
"shape": "bullet",
16+
"axis": {
17+
"range": [null, 300]
18+
},
1719
"threshold": {
1820
"line": {
1921
"color": "black",
@@ -32,7 +34,7 @@
3234
"range": [150, 250],
3335
"color": "rgba(0, 0, 0, 0.25)"
3436
}],
35-
"value": {
37+
"bar": {
3638
"color": "rgba(0, 0, 0, 1)"
3739
}
3840
},
@@ -45,11 +47,13 @@
4547
"title": {"text": "<b>Profit</b>", "font": {"size": 14}},
4648
"type": "indicator",
4749
"mode": "number+gauge+delta",
48-
"vmax": 100,
4950
"delta": {"reference": 200, "position": "bottom"},
5051
"target": 75,
5152
"gauge": {
5253
"shape": "bullet",
54+
"axis": {
55+
"range": [null, 100]
56+
},
5357
"threshold": {
5458
"line": {
5559
"color": "black",
@@ -68,7 +72,7 @@
6872
"range": [25, 75],
6973
"color": "rgba(0, 0, 0, 0.25)"
7074
}],
71-
"value": {
75+
"bar": {
7276
"color": "rgba(0, 0, 0, 1)"
7377
}
7478
},
@@ -87,10 +91,12 @@
8791
},
8892
"type": "indicator",
8993
"mode": "number+gauge+delta",
90-
"vmax": 300,
9194
"delta": {"reference": 200, "position": "top"},
9295
"gauge": {
9396
"shape": "bullet",
97+
"axis": {
98+
"range": [null, 300]
99+
},
94100
"threshold": {
95101
"line": {
96102
"color": "black",
@@ -109,7 +115,7 @@
109115
"range": [150, 250],
110116
"color": "rgba(0, 0, 0, 0.25)"
111117
}],
112-
"value": {
118+
"bar": {
113119
"color": "rgba(0, 0, 0, 1)"
114120
}
115121
},

0 commit comments

Comments
 (0)