Skip to content

Commit fc5c2c9

Browse files
archmojarchmoj
authored
Merge pull request #4037 from plotly/indicator-fixes_moj_simplify-opts
simplify opts passed in indicator plot
2 parents b942832 + 438c89c commit fc5c2c9

File tree

1 file changed

+75
-76
lines changed

1 file changed

+75
-76
lines changed

‎src/traces/indicator/plot.js

Lines changed: 75 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,17 @@ var position = {
3636

3737
var SI_PREFIX = /[yzafpnµmkMGTPEZY]/;
3838

39+
function hasTransition(transitionOpts) {
40+
// If transition config is provided, then it is only a partial replot and traces not
41+
// updated are removed.
42+
return transitionOpts && transitionOpts.duration > 0;
43+
}
44+
3945
module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallback) {
4046
var fullLayout = gd._fullLayout;
4147
var onComplete;
4248

43-
// If transition config is provided, then it is only a partial replot and traces not
44-
// updated are removed.
45-
var hasTransition = transitionOpts && transitionOpts.duration > 0;
46-
47-
if(hasTransition) {
49+
if(hasTransition(transitionOpts)) {
4850
if(makeOnCompleteCallback) {
4951
// If it was passed a callback to register completion, make a callback. If
5052
// this is created, then it must be executed on completion, otherwise the
@@ -56,6 +58,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
5658
Lib.makeTraceGroups(fullLayout._indicatorlayer, cdModule, 'trace').each(function(cd) {
5759
var cd0 = cd[0];
5860
var trace = cd0.trace;
61+
5962
var plotGroup = d3.select(this);
6063

6164
// Elements in trace
@@ -109,15 +112,13 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
109112
}
110113

111114
// Draw numbers
112-
var numbersOpts = {
115+
drawNumbers(gd, plotGroup, cd, {
113116
numbersX: numbersX,
114117
numbersY: numbersY,
115118
numbersScaler: numbersScaler,
116-
hasTransition: hasTransition,
117119
transitionOpts: transitionOpts,
118120
onComplete: onComplete
119-
};
120-
drawNumbers(gd, plotGroup, cd, numbersOpts);
121+
});
121122

122123
// Reexpress our gauge background attributes for drawing
123124
var gaugeBg, gaugeOutline;
@@ -149,37 +150,38 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
149150
var angularaxisLayer = plotGroup.selectAll('g.angularaxis').data(isAngular ? cd : []);
150151
angularaxisLayer.exit().remove();
151152

152-
var gaugeOpts = {
153-
size: size,
154-
radius: radius,
155-
innerRadius: innerRadius,
156-
gaugeBg: gaugeBg,
157-
gaugeOutline: gaugeOutline,
158-
angularaxisLayer: angularaxisLayer,
159-
angularGauge: angularGauge,
160-
hasTransition: hasTransition,
161-
transitionOpts: transitionOpts,
162-
onComplete: onComplete
163-
};
164-
if(isAngular) drawAngularGauge(gd, plotGroup, cd, gaugeOpts);
153+
if(isAngular) {
154+
drawAngularGauge(gd, plotGroup, cd, {
155+
radius: radius,
156+
innerRadius: innerRadius,
157+
158+
gauge: angularGauge,
159+
layer: angularaxisLayer,
160+
size: size,
161+
gaugeBg: gaugeBg,
162+
gaugeOutline: gaugeOutline,
163+
transitionOpts: transitionOpts,
164+
onComplete: onComplete
165+
});
166+
}
165167

166168
// Prepare bullet layers
167169
var bulletGauge = plotGroup.selectAll('g.bullet').data(isBullet ? cd : []);
168170
bulletGauge.exit().remove();
169171
var bulletaxisLayer = plotGroup.selectAll('g.bulletaxis').data(isBullet ? cd : []);
170172
bulletaxisLayer.exit().remove();
171173

172-
gaugeOpts = {
173-
size: size,
174-
gaugeBg: gaugeBg,
175-
gaugeOutline: gaugeOutline,
176-
bulletGauge: bulletGauge,
177-
bulletaxisLayer: bulletaxisLayer,
178-
hasTransition: hasTransition,
179-
transitionOpts: transitionOpts,
180-
onComplete: onComplete
181-
};
182-
if(isBullet) drawBulletGauge(gd, plotGroup, cd, gaugeOpts);
174+
if(isBullet) {
175+
drawBulletGauge(gd, plotGroup, cd, {
176+
gauge: bulletGauge,
177+
layer: bulletaxisLayer,
178+
size: size,
179+
gaugeBg: gaugeBg,
180+
gaugeOutline: gaugeOutline,
181+
transitionOpts: transitionOpts,
182+
onComplete: onComplete
183+
});
184+
}
183185

184186
// title
185187
var title = plotGroup.selectAll('text.title').data(cd);
@@ -223,40 +225,38 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
223225
});
224226
};
225227

226-
function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
228+
function drawBulletGauge(gd, plotGroup, cd, opts) {
227229
var trace = cd[0].trace;
228230

229-
var bullet = gaugeOpts.bulletGauge;
230-
var bulletaxis = gaugeOpts.bulletaxisLayer;
231-
var gaugeBg = gaugeOpts.gaugeBg;
232-
var gaugeOutline = gaugeOpts.gaugeOutline;
233-
var size = gaugeOpts.size;
231+
var bullet = opts.gauge;
232+
var axisLayer = opts.layer;
233+
var gaugeBg = opts.gaugeBg;
234+
var gaugeOutline = opts.gaugeOutline;
235+
var size = opts.size;
234236
var domain = trace.domain;
235237

236-
var hasTransition = gaugeOpts.hasTransition;
237-
var transitionOpts = gaugeOpts.transitionOpts;
238-
var onComplete = gaugeOpts.onComplete;
238+
var transitionOpts = opts.transitionOpts;
239+
var onComplete = opts.onComplete;
239240

240241
// preparing axis
241242
var ax, vals, transFn, tickSign, shift;
242-
var opts = trace.gauge.axis;
243243

244244
// Enter bullet, axis
245245
bullet.enter().append('g').classed('bullet', true);
246246
bullet.attr('transform', 'translate(' + size.l + ', ' + size.t + ')');
247247

248-
bulletaxis.enter().append('g')
248+
axisLayer.enter().append('g')
249249
.classed('bulletaxis', true)
250250
.classed('crisp', true);
251-
bulletaxis.selectAll('g.' + 'xbulletaxis' + 'tick,path,text').remove();
251+
axisLayer.selectAll('g.' + 'xbulletaxis' + 'tick,path,text').remove();
252252

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

259-
ax = mockAxis(gd, opts, trace.gauge.axis.range);
259+
ax = mockAxis(gd, trace.gauge.axis, trace.gauge.axis.range);
260260
ax._id = 'xbulletaxis';
261261
ax.domain = [bulletLeft, bulletRight];
262262
ax.setScale();
@@ -269,14 +269,14 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
269269
if(ax.visible) {
270270
Axes.drawTicks(gd, ax, {
271271
vals: ax.ticks === 'inside' ? Axes.clipEnds(ax, vals) : vals,
272-
layer: bulletaxis,
272+
layer: axisLayer,
273273
path: Axes.makeTickPath(ax, shift, tickSign),
274274
transFn: transFn
275275
});
276276

277277
Axes.drawLabels(gd, ax, {
278278
vals: vals,
279-
layer: bulletaxis,
279+
layer: axisLayer,
280280
transFn: transFn,
281281
labelFns: Axes.makeLabelFns(ax, shift)
282282
});
@@ -306,7 +306,7 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
306306
.attr('height', innerBulletHeight)
307307
.attr('y', (bulletHeight - innerBulletHeight) / 2)
308308
.call(styleShape);
309-
if(hasTransition) {
309+
if(hasTransition(transitionOpts)) {
310310
fgBullet.select('rect')
311311
.transition()
312312
.duration(transitionOpts.duration)
@@ -340,21 +340,20 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
340340
bulletOutline.exit().remove();
341341
}
342342

343-
function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
343+
function drawAngularGauge(gd, plotGroup, cd, opts) {
344344
var trace = cd[0].trace;
345345

346-
var size = gaugeOpts.size;
347-
var radius = gaugeOpts.radius;
348-
var innerRadius = gaugeOpts.innerRadius;
349-
var gaugeBg = gaugeOpts.gaugeBg;
350-
var gaugeOutline = gaugeOpts.gaugeOutline;
346+
var size = opts.size;
347+
var radius = opts.radius;
348+
var innerRadius = opts.innerRadius;
349+
var gaugeBg = opts.gaugeBg;
350+
var gaugeOutline = opts.gaugeOutline;
351351
var gaugePosition = [size.l + size.w / 2, size.t + size.h / 2 + radius / 2];
352-
var angularGauge = gaugeOpts.angularGauge;
353-
var angularaxisLayer = gaugeOpts.angularaxisLayer;
352+
var gauge = opts.gauge;
353+
var axisLayer = opts.layer;
354354

355-
var hasTransition = gaugeOpts.hasTransition;
356-
var transitionOpts = gaugeOpts.transitionOpts;
357-
var onComplete = gaugeOpts.onComplete;
355+
var transitionOpts = opts.transitionOpts;
356+
var onComplete = opts.onComplete;
358357

359358
// circular gauge
360359
var theta = Math.PI / 2;
@@ -385,18 +384,17 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
385384

386385
// preparing axis
387386
var ax, vals, transFn, tickSign;
388-
var opts = trace.gauge.axis;
389387

390388
// Enter gauge and axis
391-
angularGauge.enter().append('g').classed('angular', true);
392-
angularGauge.attr('transform', strTranslate(gaugePosition[0], gaugePosition[1]));
389+
gauge.enter().append('g').classed('angular', true);
390+
gauge.attr('transform', strTranslate(gaugePosition[0], gaugePosition[1]));
393391

394-
angularaxisLayer.enter().append('g')
392+
axisLayer.enter().append('g')
395393
.classed('angularaxis', true)
396394
.classed('crisp', true);
397-
angularaxisLayer.selectAll('g.' + 'xangularaxis' + 'tick,path,text').remove();
395+
axisLayer.selectAll('g.' + 'xangularaxis' + 'tick,path,text').remove();
398396

399-
ax = mockAxis(gd, opts);
397+
ax = mockAxis(gd, trace.gauge.axis);
400398
ax.type = 'linear';
401399
ax.range = trace.gauge.axis.range;
402400
ax._id = 'xangularaxis'; // or 'y', but I don't think this makes a difference here
@@ -451,31 +449,31 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
451449
var pad = (ax.linewidth || 1) / 2;
452450
Axes.drawTicks(gd, ax, {
453451
vals: vals,
454-
layer: angularaxisLayer,
452+
layer: axisLayer,
455453
path: 'M' + (tickSign * pad) + ',0h' + (tickSign * ax.ticklen),
456454
transFn: transFn2
457455
});
458456
Axes.drawLabels(gd, ax, {
459457
vals: vals,
460-
layer: angularaxisLayer,
458+
layer: axisLayer,
461459
transFn: transFn,
462460
labelFns: labelFns
463461
});
464462
}
465463

466464
// Draw background + steps
467465
var arcs = [gaugeBg].concat(trace.gauge.steps);
468-
var bgArc = angularGauge.selectAll('g.bg-arc').data(arcs);
466+
var bgArc = gauge.selectAll('g.bg-arc').data(arcs);
469467
bgArc.enter().append('g').classed('bg-arc', true).append('path');
470468
bgArc.select('path').call(drawArc).call(styleShape);
471469
bgArc.exit().remove();
472470

473471
// Draw foreground with transition
474472
var valueArcPathGenerator = arcPathGenerator(trace.gauge.bar.thickness);
475-
var valueArc = angularGauge.selectAll('g.value-arc').data([trace.gauge.bar]);
473+
var valueArc = gauge.selectAll('g.value-arc').data([trace.gauge.bar]);
476474
valueArc.enter().append('g').classed('value-arc', true).append('path');
477475
var valueArcPath = valueArc.select('path');
478-
if(hasTransition) {
476+
if(hasTransition(transitionOpts)) {
479477
valueArcPath
480478
.transition()
481479
.duration(transitionOpts.duration)
@@ -505,26 +503,26 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
505503
thickness: trace.gauge.threshold.thickness
506504
});
507505
}
508-
var thresholdArc = angularGauge.selectAll('g.threshold-arc').data(arcs);
506+
var thresholdArc = gauge.selectAll('g.threshold-arc').data(arcs);
509507
thresholdArc.enter().append('g').classed('threshold-arc', true).append('path');
510508
thresholdArc.select('path').call(drawArc).call(styleShape);
511509
thresholdArc.exit().remove();
512510

513511
// Draw border last
514-
var gaugeBorder = angularGauge.selectAll('g.gauge-outline').data([gaugeOutline]);
512+
var gaugeBorder = gauge.selectAll('g.gauge-outline').data([gaugeOutline]);
515513
gaugeBorder.enter().append('g').classed('gauge-outline', true).append('path');
516514
gaugeBorder.select('path').call(drawArc).call(styleShape);
517515
gaugeBorder.exit().remove();
518516
}
519517

520518
function drawNumbers(gd, plotGroup, cd, opts) {
521519
var trace = cd[0].trace;
520+
522521
var numbersX = opts.numbersX;
523522
var numbersY = opts.numbersY;
524523
var numbersAlign = trace.align || 'center';
525524
var numbersAnchor = anchor[numbersAlign];
526525

527-
var hasTransition = opts.hasTransition;
528526
var transitionOpts = opts.transitionOpts;
529527
var onComplete = opts.onComplete;
530528

@@ -582,7 +580,8 @@ function drawNumbers(gd, plotGroup, cd, opts) {
582580
function writeNumber() {
583581
number.text(bignumberPrefix + fmt(cd[0].y) + bignumberSuffix);
584582
}
585-
if(hasTransition) {
583+
584+
if(hasTransition(transitionOpts)) {
586585
number
587586
.transition()
588587
.duration(transitionOpts.duration)
@@ -635,7 +634,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
635634
.call(Color.fill, deltaFill(cd[0]));
636635
}
637636

638-
if(hasTransition) {
637+
if(hasTransition(transitionOpts)) {
639638
delta
640639
.transition()
641640
.duration(transitionOpts.duration)

0 commit comments

Comments
 (0)