Merge pull request #6324 from plotly/complete-legend-entrywidth

Complete legend `entrywidth` feature

Author: archmoj

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)]

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',

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);

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;
 

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"