Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

simplify opts passed in indicator plot #4037

Merged
merged 2 commits into from
Jul 11, 2019
+75 −76
Merged

simplify opts passed in indicator plot #4037

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5590398
simplify passing opts in indicator plot.js
archmoj Jul 11, 2019
438c89c
use axisLayer for clarity
archmoj Jul 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 75 additions & 76 deletions src/traces/indicator/plot.js
View file
Original file line number Diff line number Diff line change
@@ -36,15 +36,17 @@ var position = {

var SI_PREFIX = /[yzafpnµmkMGTPEZY]/;

function hasTransition(transitionOpts) {
// If transition config is provided, then it is only a partial replot and traces not
// updated are removed.
return transitionOpts && transitionOpts.duration > 0;
}

module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallback) {
var fullLayout = gd._fullLayout;
var onComplete;

// If transition config is provided, then it is only a partial replot and traces not
// updated are removed.
var hasTransition = transitionOpts && transitionOpts.duration > 0;

if(hasTransition) {
if(hasTransition(transitionOpts)) {
if(makeOnCompleteCallback) {
// If it was passed a callback to register completion, make a callback. If
// this is created, then it must be executed on completion, otherwise the
@@ -56,6 +58,7 @@ module.exports = function plot(gd, cdModule, transitionOpts, makeOnCompleteCallb
Lib.makeTraceGroups(fullLayout._indicatorlayer, cdModule, 'trace').each(function(cd) {
var cd0 = cd[0];
var trace = cd0.trace;

var plotGroup = d3.select(this);

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

// Draw numbers
var numbersOpts = {
drawNumbers(gd, plotGroup, cd, {
numbersX: numbersX,
numbersY: numbersY,
numbersScaler: numbersScaler,
hasTransition: hasTransition,
transitionOpts: transitionOpts,
onComplete: onComplete
};
drawNumbers(gd, plotGroup, cd, numbersOpts);
});

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

var gaugeOpts = {
size: size,
radius: radius,
innerRadius: innerRadius,
gaugeBg: gaugeBg,
gaugeOutline: gaugeOutline,
angularaxisLayer: angularaxisLayer,
angularGauge: angularGauge,
hasTransition: hasTransition,
transitionOpts: transitionOpts,
onComplete: onComplete
};
if(isAngular) drawAngularGauge(gd, plotGroup, cd, gaugeOpts);
if(isAngular) {
drawAngularGauge(gd, plotGroup, cd, {
radius: radius,
innerRadius: innerRadius,

gauge: angularGauge,
layer: angularaxisLayer,
size: size,
gaugeBg: gaugeBg,
gaugeOutline: gaugeOutline,
transitionOpts: transitionOpts,
onComplete: onComplete
});
}

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

gaugeOpts = {
size: size,
gaugeBg: gaugeBg,
gaugeOutline: gaugeOutline,
bulletGauge: bulletGauge,
bulletaxisLayer: bulletaxisLayer,
hasTransition: hasTransition,
transitionOpts: transitionOpts,
onComplete: onComplete
};
if(isBullet) drawBulletGauge(gd, plotGroup, cd, gaugeOpts);
if(isBullet) {
drawBulletGauge(gd, plotGroup, cd, {
gauge: bulletGauge,
layer: bulletaxisLayer,
size: size,
gaugeBg: gaugeBg,
gaugeOutline: gaugeOutline,
transitionOpts: transitionOpts,
onComplete: onComplete
});
}

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

function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
function drawBulletGauge(gd, plotGroup, cd, opts) {
var trace = cd[0].trace;

var bullet = gaugeOpts.bulletGauge;
var bulletaxis = gaugeOpts.bulletaxisLayer;
var gaugeBg = gaugeOpts.gaugeBg;
var gaugeOutline = gaugeOpts.gaugeOutline;
var size = gaugeOpts.size;
var bullet = opts.gauge;
var axisLayer = opts.layer;
var gaugeBg = opts.gaugeBg;
var gaugeOutline = opts.gaugeOutline;
var size = opts.size;
var domain = trace.domain;

var hasTransition = gaugeOpts.hasTransition;
var transitionOpts = gaugeOpts.transitionOpts;
var onComplete = gaugeOpts.onComplete;
var transitionOpts = opts.transitionOpts;
var onComplete = opts.onComplete;

// preparing axis
var ax, vals, transFn, tickSign, shift;
var opts = trace.gauge.axis;

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

bulletaxis.enter().append('g')
axisLayer.enter().append('g')
.classed('bulletaxis', true)
.classed('crisp', true);
bulletaxis.selectAll('g.' + 'xbulletaxis' + 'tick,path,text').remove();
axisLayer.selectAll('g.' + 'xbulletaxis' + 'tick,path,text').remove();

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

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

Axes.drawLabels(gd, ax, {
vals: vals,
layer: bulletaxis,
layer: axisLayer,
transFn: transFn,
labelFns: Axes.makeLabelFns(ax, shift)
});
@@ -306,7 +306,7 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
.attr('height', innerBulletHeight)
.attr('y', (bulletHeight - innerBulletHeight) / 2)
.call(styleShape);
if(hasTransition) {
if(hasTransition(transitionOpts)) {
fgBullet.select('rect')
.transition()
.duration(transitionOpts.duration)
@@ -340,21 +340,20 @@ function drawBulletGauge(gd, plotGroup, cd, gaugeOpts) {
bulletOutline.exit().remove();
}

function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
function drawAngularGauge(gd, plotGroup, cd, opts) {
var trace = cd[0].trace;

var size = gaugeOpts.size;
var radius = gaugeOpts.radius;
var innerRadius = gaugeOpts.innerRadius;
var gaugeBg = gaugeOpts.gaugeBg;
var gaugeOutline = gaugeOpts.gaugeOutline;
var size = opts.size;
var radius = opts.radius;
var innerRadius = opts.innerRadius;
var gaugeBg = opts.gaugeBg;
var gaugeOutline = opts.gaugeOutline;
var gaugePosition = [size.l + size.w / 2, size.t + size.h / 2 + radius / 2];
var angularGauge = gaugeOpts.angularGauge;
var angularaxisLayer = gaugeOpts.angularaxisLayer;
var gauge = opts.gauge;
var axisLayer = opts.layer;

var hasTransition = gaugeOpts.hasTransition;
var transitionOpts = gaugeOpts.transitionOpts;
var onComplete = gaugeOpts.onComplete;
var transitionOpts = opts.transitionOpts;
var onComplete = opts.onComplete;

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

// preparing axis
var ax, vals, transFn, tickSign;
var opts = trace.gauge.axis;

// Enter gauge and axis
angularGauge.enter().append('g').classed('angular', true);
angularGauge.attr('transform', strTranslate(gaugePosition[0], gaugePosition[1]));
gauge.enter().append('g').classed('angular', true);
gauge.attr('transform', strTranslate(gaugePosition[0], gaugePosition[1]));

angularaxisLayer.enter().append('g')
axisLayer.enter().append('g')
.classed('angularaxis', true)
.classed('crisp', true);
angularaxisLayer.selectAll('g.' + 'xangularaxis' + 'tick,path,text').remove();
axisLayer.selectAll('g.' + 'xangularaxis' + 'tick,path,text').remove();

ax = mockAxis(gd, opts);
ax = mockAxis(gd, trace.gauge.axis);
ax.type = 'linear';
ax.range = trace.gauge.axis.range;
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) {
var pad = (ax.linewidth || 1) / 2;
Axes.drawTicks(gd, ax, {
vals: vals,
layer: angularaxisLayer,
layer: axisLayer,
path: 'M' + (tickSign * pad) + ',0h' + (tickSign * ax.ticklen),
transFn: transFn2
});
Axes.drawLabels(gd, ax, {
vals: vals,
layer: angularaxisLayer,
layer: axisLayer,
transFn: transFn,
labelFns: labelFns
});
}

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

// Draw foreground with transition
var valueArcPathGenerator = arcPathGenerator(trace.gauge.bar.thickness);
var valueArc = angularGauge.selectAll('g.value-arc').data([trace.gauge.bar]);
var valueArc = gauge.selectAll('g.value-arc').data([trace.gauge.bar]);
valueArc.enter().append('g').classed('value-arc', true).append('path');
var valueArcPath = valueArc.select('path');
if(hasTransition) {
if(hasTransition(transitionOpts)) {
valueArcPath
.transition()
.duration(transitionOpts.duration)
@@ -505,26 +503,26 @@ function drawAngularGauge(gd, plotGroup, cd, gaugeOpts) {
thickness: trace.gauge.threshold.thickness
});
}
var thresholdArc = angularGauge.selectAll('g.threshold-arc').data(arcs);
var thresholdArc = gauge.selectAll('g.threshold-arc').data(arcs);
thresholdArc.enter().append('g').classed('threshold-arc', true).append('path');
thresholdArc.select('path').call(drawArc).call(styleShape);
thresholdArc.exit().remove();

// Draw border last
var gaugeBorder = angularGauge.selectAll('g.gauge-outline').data([gaugeOutline]);
var gaugeBorder = gauge.selectAll('g.gauge-outline').data([gaugeOutline]);
gaugeBorder.enter().append('g').classed('gauge-outline', true).append('path');
gaugeBorder.select('path').call(drawArc).call(styleShape);
gaugeBorder.exit().remove();
}

function drawNumbers(gd, plotGroup, cd, opts) {
var trace = cd[0].trace;

var numbersX = opts.numbersX;
var numbersY = opts.numbersY;
var numbersAlign = trace.align || 'center';
var numbersAnchor = anchor[numbersAlign];

var hasTransition = opts.hasTransition;
var transitionOpts = opts.transitionOpts;
var onComplete = opts.onComplete;

@@ -582,7 +580,8 @@ function drawNumbers(gd, plotGroup, cd, opts) {
function writeNumber() {
number.text(bignumberPrefix + fmt(cd[0].y) + bignumberSuffix);
}
if(hasTransition) {

if(hasTransition(transitionOpts)) {
number
.transition()
.duration(transitionOpts.duration)
@@ -635,7 +634,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
.call(Color.fill, deltaFill(cd[0]));
}

if(hasTransition) {
if(hasTransition(transitionOpts)) {
delta
.transition()
.duration(transitionOpts.duration)