Allow set legend with in fractions

Author: nickmelnikov82

src/components/legend/attributes.js

@@ -74,11 +74,18 @@ module.exports = {
             'Sets the amount of vertical space (in px) between legend groups.'
         ].join(' ')
     },
-    legendtextwidth: {
+    entrywidth: {
         valType: 'number',
         min: 0,
         editType: 'legend',
-        description: 'Sets the width (in px) of the legend.',
+        description: 'Sets the width (in px or fraction) of the legend.',
+    },
+    widthmode: {
+        valType: 'enumerated',
+        values: ['fraction', 'pixels'],
+        dflt: 'pixels',
+        editType: 'legend',
+        description: 'Determines what entrywidth means.',
     },
     itemsizing: {
         valType: 'enumerated',

src/components/legend/defaults.js

@@ -122,7 +122,8 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     coerce('traceorder', defaultOrder);
     if(helpers.isGrouped(layoutOut.legend)) coerce('tracegroupgap');
 
-    coerce('legendtextwidth');
+    coerce('entrywidth');
+    coerce('widthmode');
     coerce('itemsizing');
     coerce('itemwidth');
 

src/components/legend/draw.js

@@ -351,17 +351,19 @@ function _draw(gd, legendObj) {
         }], gd);
 }
 
-function getTraceWidth(trace, legendObj, textGap, isGrouped) {
+function getTraceWidth(trace, legendObj, textGap) {
     var legendItem = trace[0];
     var legendWidth = legendItem.width;
 
-    if(legendItem.trace.legendtextwidth !== undefined) {
-        legendWidth = legendItem.trace.legendtextwidth;
-    } else if(isGrouped && legendItem.trace.legendgroup !== '') {
-        legendWidth = legendItem.width;
-    } else if(legendObj.legendtextwidth !== undefined) {
-        legendWidth = legendObj.legendtextwidth;
-    }
+    var traceLegendWidth = legendItem.trace.legendwidth || legendObj.entrywidth
+
+        if (traceLegendWidth) {
+            if (legendObj.widthmode === "pixels") {
+                return traceLegendWidth + textGap
+            } else {
+                return legendObj._maxWidth * traceLegendWidth
+            }
+        }
 
     return legendWidth + textGap;
 }
@@ -704,7 +706,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
         var maxItemWidth = 0;
         var combinedItemWidth = 0;
         traces.each(function(d) {
-            var w = getTraceWidth(d, legendObj, textGap, isGrouped);
+            var w = getTraceWidth(d, legendObj, textGap);
             maxItemWidth = Math.max(maxItemWidth, w);
             combinedItemWidth += w;
         });
@@ -720,7 +722,7 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
                 var maxWidthInGroup = 0;
                 var offsetY = 0;
                 d3.select(this).selectAll('g.traces').each(function(d) {
-                    var w = getTraceWidth(d, legendObj, textGap, isGrouped);
+                    var w = getTraceWidth(d, legendObj, textGap);
                     var h = d[0].height;
 
                     Drawing.setTranslate(this,
@@ -768,7 +770,11 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
             traces.each(function(d) {
                 var h = d[0].height;
                 var w = getTraceWidth(d, legendObj, textGap, isGrouped);
-                var next = (oneRowLegend ? w : maxItemWidth) + itemGap;
+                var next = (oneRowLegend ? w : maxItemWidth);
+
+                if (legendObj.widthmode !== 'fraction') {
+                    next += itemGap;
+                }
 
                 if((next + bw + offsetX - itemGap) >= legendObj._maxWidth) {
                     maxRowWidth = Math.max(maxRowWidth, rowWidth);
@@ -825,7 +831,9 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
             traceWidth = legendGroupWidths[legendgroup];
         }
         var w = isEditable ? textGap : (toggleRectWidth || traceWidth);
-        if(!isVertical) w += itemGap / 2;
+        if(!isVertical && legendObj.widthmode !== "fraction") {
+            w += itemGap / 2;
+        }
         Drawing.setRect(traceToggle, 0, -h / 2, w, h);
     });
 }

src/plots/attributes.js

@@ -72,11 +72,11 @@ module.exports = {
             'and ranks greater than 1000 to go after all unranked items.'
         ].join(' ')
     },
-    legendtextwidth: {
+    legendwidth: {
         valType: 'number',
         min: 0,
         editType: 'style',
-        description: 'Sets the width (in px) of the legend for this trace.',
+        description: 'Sets the width (in px or fraction) of the legend for this trace.',
     },
     opacity: {
         valType: 'number',

src/plots/plots.js

@@ -1320,7 +1320,7 @@ plots.supplyTraceDefaults = function(traceIn, traceOut, colorIndex, layout, trac
                 'showlegend'
             );
 
-            coerce('legendtextwidth');
+            coerce('legendwidth');
             coerce('legendgroup');
             coerce('legendgrouptitle.text');
             coerce('legendrank');

test/jasmine/tests/legend_test.js

@@ -2347,7 +2347,7 @@ describe('legend with custom doubleClickDelay', function() {
     }, 3 * jasmine.DEFAULT_TIMEOUT_INTERVAL);
 });
 
-describe('legend with custom legendtextwidth', function() {
+describe('legend with custom legendwidth', function() {
     var gd;
 
     var data = [
@@ -2379,10 +2379,10 @@ describe('legend with custom legendtextwidth', function() {
         });
     }
 
-    it('should change width when trace has legendtextwidth', function(done) {
+    it('should change width when trace has legendwidth', function(done) {
         var extendedData = Lib.extendDeep([], data);
         extendedData.forEach(function(trace, index) {
-            trace.legendtextwidth = (index + 1) * 50;
+            trace.legendwidth = (index + 1) * 50;
         });
 
         var textGap = 30 + constants.itemGap * 2 + constants.itemGap / 2;
@@ -2392,10 +2392,10 @@ describe('legend with custom legendtextwidth', function() {
         }).then(done);
     });
 
-    it('should change width when legend has legendtextwidth', function(done) {
+    it('should change width when legend has entrywidth', function(done) {
         var extendedLayout = Lib.extendDeep([], layout);
         var width = 50;
-        extendedLayout.legend.legendtextwidth = width;
+        extendedLayout.legend.entrywidth = width;
 
         var textGap = 30 + constants.itemGap * 2 + constants.itemGap / 2;
 
@@ -2404,12 +2404,12 @@ describe('legend with custom legendtextwidth', function() {
         }).then(done);
     });
 
-    it('should change group width when trace has legendtextwidth', function(done) {
+    it('should change group width when trace has legendwidth', function(done) {
         var extendedLayout = Lib.extendDeep([], layout);
         extendedLayout.legend.traceorder = 'grouped';
 
         var extendedData = Lib.extendDeep([], data);
-        extendedData[0].legendtextwidth = 100;
+        extendedData[0].legendwidth = 100;
         extendedData[0].legendgroup = 'test';
         extendedData[1].legendgroup = 'test';
 
@@ -2420,20 +2420,15 @@ describe('legend with custom legendtextwidth', function() {
         }).then(done);
     });
 
-    it('should prefer group legendtextwidth to the legend legendtextwidth', function(done) {
-        var extendedLayout = Lib.extendDeep([], layout);
-        extendedLayout.legend.traceorder = 'grouped';
-        extendedLayout.legend.legendtextwidth = 50;
 
-        var extendedData = Lib.extendDeep([], data);
-        extendedData[0].legendtextwidth = 100;
-        extendedData[0].legendgroup = 'test';
-        extendedData[1].legendgroup = 'test';
 
-        var textGap = 30 + constants.itemGap * 2 + constants.itemGap / 2;
+    it('should change width when legend has entrywidth and widthmode is fraction', function(done) {
+        var extendedLayout = Lib.extendDeep([], layout);
+        extendedLayout.legend.widthmode = 'fraction';
+        extendedLayout.legend.entrywidth = 0.3;
 
-        Plotly.newPlot(gd, {data: extendedData, layout: extendedLayout}).then(function() {
-            assertLegendTextWidth([100 + textGap, 100 + textGap, 50 + textGap]);
+        Plotly.newPlot(gd, {data: data, layout: extendedLayout}).then(function() {
+            assertLegendTextWidth([162, 162, 162]);
         }).then(done);
     });
 });