Skip to content

Add legend itemsizing #3732

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

Merged
merged 5 commits into from
Apr 9, 2019
Merged

Add legend itemsizing #3732

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
51358f2
misc linting
etpinard Apr 4, 2019
a98e0a4
add info to pie test assertions
etpinard Apr 4, 2019
0cfda10
implement legend.itemsizing:constant
etpinard Apr 4, 2019
1bc6a80
fix gl3d baselines w/ "too wide" line widths in legend item
etpinard Apr 4, 2019
c6301a1
mojtaba-proof constant-itemsizing mock
etpinard Apr 9, 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
4 changes: 2 additions & 2 deletions src/components/drawing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ drawing.crispRound = function(gd, lineWidth, dflt) {
drawing.singleLineStyle = function(d, s, lw, lc, ld) {
s.style('fill', 'none');
var line = (((d || [])[0] || {}).trace || {}).line || {};
var lw1 = lw || line.width||0;
var lw1 = lw || line.width || 0;
var dash = ld || line.dash || '';

Color.stroke(s, lc || line.color);
Expand All @@ -147,7 +147,7 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
s.style('fill', 'none')
.each(function(d) {
var line = (((d || [])[0] || {}).trace || {}).line || {};
var lw1 = lw || line.width||0;
var lw1 = lw || line.width || 0;
var dash = ld || line.dash || '';

d3.select(this)
Expand Down
12 changes: 12 additions & 0 deletions src/components/legend/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,18 @@ module.exports = {
'Sets the amount of vertical space (in px) between legend groups.'
].join(' ')
},
itemsizing: {
valType: 'enumerated',
values: ['trace', 'constant'],
dflt: 'trace',
role: 'style',
editType: 'legend',
description: [
'Determines if the legend items symbols scale with their corresponding *trace* attributes',
'or remain *constant* independent of the symbol size on the graph.'
].join(' ')
},

x: {
valType: 'number',
min: -2,
Expand Down
2 changes: 2 additions & 0 deletions src/components/legend/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,8 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
coerce('traceorder', defaultOrder);
if(helpers.isGrouped(layoutOut.legend)) coerce('tracegroupgap');

coerce('itemsizing');

coerce('x', defaultX);
coerce('xanchor', defaultXAnchor);
coerce('y', defaultY);
Expand Down
107 changes: 69 additions & 38 deletions src/components/legend/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,38 @@ var Color = require('../color');

var subTypes = require('../../traces/scatter/subtypes');
var stylePie = require('../../traces/pie/style_one');
var pieCastOption = require('../../traces/pie/helpers').castOption;

var CST_MARKER_SIZE = 12;
var CST_LINE_WIDTH = 5;
var CST_MARKER_LINE_WIDTH = 2;
var MAX_LINE_WIDTH = 10;
var MAX_MARKER_LINE_WIDTH = 5;

module.exports = function style(s, gd) {
var fullLayout = gd._fullLayout;
var legend = fullLayout.legend;
var constantItemSizing = legend.itemsizing === 'constant';

function boundLineWidth(mlw, cont, max, cst) {
var v;
if(mlw + 1) {
v = mlw;
} else if(cont && cont.width > 0) {
v = cont.width;
} else {
return 0;
}
return constantItemSizing ? cst : Math.min(v, max);
}

s.each(function(d) {
var traceGroup = d3.select(this);

var layers = Lib.ensureSingle(traceGroup, 'g', 'layers');
layers.style('opacity', d[0].trace.opacity);

// Marker vertical alignment
var valign = gd._fullLayout.legend.valign;
var valign = legend.valign;
var lineHeight = d[0].lineHeight;
var height = d[0].height;

Expand Down Expand Up @@ -71,28 +93,27 @@ module.exports = function style(s, gd) {
.each(styleOHLC);

function styleLines(d) {
var trace = d[0].trace;
var d0 = d[0];
var trace = d0.trace;
var showFill = trace.visible && trace.fill && trace.fill !== 'none';
var showLine = subTypes.hasLines(trace);
var contours = trace.contours;
var showGradientLine = false;
var showGradientFill = false;
var dMod, tMod;

if(contours) {
var coloring = contours.coloring;

if(coloring === 'lines') {
showGradientLine = true;
}
else {
showLine = coloring === 'none' || coloring === 'heatmap' ||
contours.showlines;
} else {
showLine = coloring === 'none' || coloring === 'heatmap' || contours.showlines;
}

if(contours.type === 'constraint') {
showFill = contours._operation !== '=';
}
else if(coloring === 'fill' || coloring === 'heatmap') {
} else if(coloring === 'fill' || coloring === 'heatmap') {
showGradientFill = true;
}
}
Expand All @@ -116,8 +137,14 @@ module.exports = function style(s, gd) {
fill.attr('d', pathStart + 'h30v6h-30z')
.call(showFill ? Drawing.fillGroupStyle : fillGradient);

if(showLine || showGradientLine) {
var lw = boundLineWidth(undefined, trace.line, MAX_LINE_WIDTH, CST_LINE_WIDTH);
tMod = Lib.minExtend(trace, {line: {width: lw}});
dMod = [Lib.minExtend(d0, {trace: tMod})];
}

var line = this3.select('.legendlines').selectAll('path')
.data(showLine || showGradientLine ? [d] : []);
.data(showLine || showGradientLine ? [dMod] : []);
line.enter().append('path').classed('js-line', true);
line.exit().remove();

Expand Down Expand Up @@ -159,12 +186,16 @@ module.exports = function style(s, gd) {
// 'scatter3d' don't use gd.calcdata,
// use d0.trace to infer arrayOk attributes

function boundVal(attrIn, arrayToValFn, bounds) {
function boundVal(attrIn, arrayToValFn, bounds, cst) {
var valIn = Lib.nestedProperty(trace, attrIn).get();
var valToBound = (Lib.isArrayOrTypedArray(valIn) && arrayToValFn) ?
arrayToValFn(valIn) :
valIn;

if(constantItemSizing && valToBound && cst !== undefined) {
valToBound = cst;
}

if(bounds) {
if(valToBound < bounds[0]) return bounds[0];
else if(valToBound > bounds[1]) return bounds[1];
Expand All @@ -184,21 +215,21 @@ module.exports = function style(s, gd) {
dEdit.mx = boundVal('marker.symbol', pickFirst);
dEdit.mo = boundVal('marker.opacity', Lib.mean, [0.2, 1]);
dEdit.mlc = boundVal('marker.line.color', pickFirst);
dEdit.mlw = boundVal('marker.line.width', Lib.mean, [0, 5]);
dEdit.mlw = boundVal('marker.line.width', Lib.mean, [0, 5], CST_MARKER_LINE_WIDTH);
tEdit.marker = {
sizeref: 1,
sizemin: 1,
sizemode: 'diameter'
};

var ms = boundVal('marker.size', Lib.mean, [2, 16]);
var ms = boundVal('marker.size', Lib.mean, [2, 16], CST_MARKER_SIZE);
dEdit.ms = ms;
tEdit.marker.size = ms;
}

if(showLines) {
tEdit.line = {
width: boundVal('line.width', pickFirst, [0, 10])
width: boundVal('line.width', pickFirst, [0, 10], CST_LINE_WIDTH)
};
}

Expand Down Expand Up @@ -262,12 +293,13 @@ module.exports = function style(s, gd) {
pts.each(function(dd) {
var pt = d3.select(this);
var cont = trace[dd[0]].marker;
var lw = boundLineWidth(undefined, cont.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);

pt.attr('d', dd[1])
.style('stroke-width', cont.line.width + 'px')
.style('stroke-width', lw + 'px')
.call(Color.fill, cont.color);

if(cont.line.width) {
if(lw) {
pt.call(Color.stroke, cont.line.color);
}
});
Expand All @@ -289,14 +321,12 @@ module.exports = function style(s, gd) {
barpath.each(function(d) {
var p = d3.select(this);
var d0 = d[0];
var w = (d0.mlw + 1 || markerLine.width + 1) - 1;
var w = boundLineWidth(d0.mlw, marker.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);

p.style('stroke-width', w + 'px')
.call(Color.fill, d0.mc || marker.color);

if(w) {
p.call(Color.stroke, d0.mlc || markerLine.color);
}
if(w) Color.stroke(p, d0.mlc || markerLine.color);
});
}

Expand All @@ -313,15 +343,13 @@ module.exports = function style(s, gd) {
pts.exit().remove();

pts.each(function() {
var w = trace.line.width;
var p = d3.select(this);
var w = boundLineWidth(undefined, trace.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);

p.style('stroke-width', w + 'px')
.call(Color.fill, trace.fillcolor);

if(w) {
Color.stroke(p, trace.line.color);
}
if(w) Color.stroke(p, trace.line.color);
});
}

Expand All @@ -341,16 +369,14 @@ module.exports = function style(s, gd) {
pts.exit().remove();

pts.each(function(_, i) {
var container = trace[i ? 'increasing' : 'decreasing'];
var w = container.line.width;
var p = d3.select(this);
var cont = trace[i ? 'increasing' : 'decreasing'];
var w = boundLineWidth(undefined, cont.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);

p.style('stroke-width', w + 'px')
.call(Color.fill, container.fillcolor);
.call(Color.fill, cont.fillcolor);

if(w) {
Color.stroke(p, container.line.color);
}
if(w) Color.stroke(p, cont.line.color);
});
}

Expand All @@ -370,21 +396,20 @@ module.exports = function style(s, gd) {
pts.exit().remove();

pts.each(function(_, i) {
var container = trace[i ? 'increasing' : 'decreasing'];
var w = container.line.width;
var p = d3.select(this);
var cont = trace[i ? 'increasing' : 'decreasing'];
var w = boundLineWidth(undefined, cont.line, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);

p.style('fill', 'none')
.call(Drawing.dashLine, container.line.dash, w);
.call(Drawing.dashLine, cont.line.dash, w);

if(w) {
Color.stroke(p, container.line.color);
}
if(w) Color.stroke(p, cont.line.color);
});
}

function stylePies(d) {
var trace = d[0].trace;
var d0 = d[0];
var trace = d0.trace;

var pts = d3.select(this).select('g.legendpoints')
.selectAll('path.legendpie')
Expand All @@ -394,6 +419,12 @@ module.exports = function style(s, gd) {
.attr('transform', 'translate(20,0)');
pts.exit().remove();

if(pts.size()) pts.call(stylePie, d[0], trace);
if(pts.size()) {
var cont = (trace.marker || {}).line;
var lw = boundLineWidth(pieCastOption(cont.width, d0.pts), cont, MAX_MARKER_LINE_WIDTH, CST_MARKER_LINE_WIDTH);
var tMod = Lib.minExtend(trace, {marker: {line: {width: lw}}});
var d0Mod = Lib.minExtend(d0, {trace: tMod});
stylePie(pts, d0Mod, tMod);
}
}
};
2 changes: 1 addition & 1 deletion src/traces/pie/style_one.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ module.exports = function styleOne(s, pt, trace) {
var lineColor = castOption(line.color, pt.pts) || Color.defaultLine;
var lineWidth = castOption(line.width, pt.pts) || 0;

s.style({'stroke-width': lineWidth})
s.style('stroke-width', lineWidth)
.call(Color.fill, pt.color)
.call(Color.stroke, lineColor);
};
Binary file modified test/image/baselines/gl3d_line_rectangle_render.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_log-axis-big.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified test/image/baselines/gl3d_log-axis.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/image/baselines/legend-constant-itemsizing.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading