diff --git a/draftlogs/6324_add.md b/draftlogs/6324_add.md new file mode 100644 index 00000000000..21cd51f555d --- /dev/null +++ b/draftlogs/6324_add.md @@ -0,0 +1 @@ + - Add `entrywidth` and `entrywidthmode` to legend [[#6202](https://github.com/plotly/plotly.js/pull/6202), [#6324](https://github.com/plotly/plotly.js/pull/6324)] diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index f0a94879862..3ef9b701e98 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -78,7 +78,11 @@ module.exports = { valType: 'number', min: 0, editType: 'legend', - description: 'Sets the width (in px or fraction) of the legend.', + description: [ + 'Sets the width (in px or fraction) of the legend.', + 'Use 0 to size the entry based on the text width,', + 'when `entrywidthmode` is set to *pixels*.' + ].join(' ') }, entrywidthmode: { valType: 'enumerated', diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 11f81d2185c..abbced80002 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -351,21 +351,16 @@ function _draw(gd, legendObj) { }], gd); } -function getTraceWidth(trace, legendObj, textGap) { - var legendItem = trace[0]; +function getTraceWidth(d, legendObj, textGap) { + var legendItem = d[0]; var legendWidth = legendItem.width; + var mode = legendObj.entrywidthmode; var traceLegendWidth = legendItem.trace.legendwidth || legendObj.entrywidth; - if(traceLegendWidth) { - if(legendObj.entrywidthmode === 'pixels') { - return traceLegendWidth + textGap; - } else { - return legendObj._maxWidth * traceLegendWidth; - } - } + if(mode === 'fraction') return legendObj._maxWidth * traceLegendWidth; - return legendWidth + textGap; + return textGap + (traceLegendWidth || legendWidth); } function clickOrDoubleClick(gd, legend, legendItem, numClicks, evt) { @@ -641,6 +636,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var isVertical = helpers.isVertical(legendObj); var isGrouped = helpers.isGrouped(legendObj); + var isFraction = legendObj.entrywidthmode === 'fraction'; var bw = legendObj.borderwidth; var bw2 = 2 * bw; @@ -772,7 +768,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var w = getTraceWidth(d, legendObj, textGap, isGrouped); var next = (oneRowLegend ? w : maxItemWidth); - if(legendObj.entrywidthmode !== 'fraction') { + if(!isFraction) { next += itemGap; } @@ -831,7 +827,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { traceWidth = legendGroupWidths[legendgroup]; } var w = isEditable ? textGap : (toggleRectWidth || traceWidth); - if(!isVertical && legendObj.entrywidthmode !== 'fraction') { + if(!isVertical && !isFraction) { w += itemGap / 2; } Drawing.setRect(traceToggle, 0, -h / 2, w, h); diff --git a/test/jasmine/tests/legend_test.js b/test/jasmine/tests/legend_test.js index 2a68e6b753a..490eb5a7030 100644 --- a/test/jasmine/tests/legend_test.js +++ b/test/jasmine/tests/legend_test.js @@ -2393,7 +2393,7 @@ describe('legend with custom legendwidth', function() { }); it('should change width when legend has entrywidth', function(done) { - var extendedLayout = Lib.extendDeep([], layout); + var extendedLayout = Lib.extendDeep({}, layout); var width = 50; extendedLayout.legend.entrywidth = width; @@ -2421,7 +2421,7 @@ describe('legend with custom legendwidth', function() { }); it('should change width when legend has entrywidth and entrywidthmode is fraction', function(done) { - var extendedLayout = Lib.extendDeep([], layout); + var extendedLayout = Lib.extendDeep({}, layout); extendedLayout.legend.entrywidthmode = 'fraction'; extendedLayout.legend.entrywidth = 0.3; diff --git a/test/plot-schema.json b/test/plot-schema.json index 36b678b6d30..dbe239cd99d 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -2756,7 +2756,7 @@ }, "editType": "legend", "entrywidth": { - "description": "Sets the width (in px or fraction) of the legend.", + "description": "Sets the width (in px or fraction) of the legend. Use 0 to size the entry based on the text width, when `entrywidthmode` is set to *pixels*.", "editType": "legend", "min": 0, "valType": "number"