Fix #1913 by adding pushing overflowed legend items to a new line whilst respecting grouping

Author: nathanjenx

src/components/legend/draw.js

@@ -586,23 +586,60 @@ function computeLegendDimensions(gd, groups, traces) {
         extraWidth = 40;
     }
     else if(isGrouped) {
-        var groupXOffsets = [opts._width];
+        var maxHeight = 0;
+        var maxWidth = 0;
         var groupData = groups.data();
 
-        for(var i = 0, n = groupData.length; i < n; i++) {
-            var textWidths = groupData[i].map(function(legendItemArray) {
+        var maxItems = 0;
+
+        groupData.forEach(function(group) {
+
+
+            var groupWidths = group.map(function(legendItemArray) {
                 return legendItemArray[0].width;
             });
 
-            var groupWidth = 40 + Math.max.apply(null, textWidths);
+            var groupWidth = Math.max.apply(null, groupWidths);
+            var groupHeight = group.reduce(function(a, b) {
+                return a + b[0].height;
+            }, 0);
+
+            maxWidth = Math.max(maxWidth, groupWidth);
+            maxHeight = Math.max(maxHeight, groupHeight);
+            maxItems = Math.max(maxItems, group.length);
+        });
+
+        var traceGroupGap = opts.tracegroupgap || 5;
+
+        maxHeight += traceGroupGap;
+
+        var groupXOffsets = [opts._width];
+        var rowHeights = [];
+        var rowNum = 1;
+        for(var i = 0, n = groupData.length; i < n; i++) {
+            opts._width += traceGroupGap + maxWidth;
+
+            if(fullLayout._size.w < (borderwidth + opts._width)) {
+                groupXOffsets[groupXOffsets.length - 1] = 0;
+                opts._width = maxWidth + traceGroupGap;
+                rowNum++;
+            }
+
+            var currRowHeight = ((rowNum - 1) * maxHeight);
 
-            opts._width += opts.tracegroupgap + groupWidth;
+            var length = groupData[i].length;
+            var y = ((1 - (length / maxItems)) * maxHeight);
+            currRowHeight = currRowHeight > (rowNum - 1 * maxHeight) ? (rowNum - 1) * maxHeight : y;
+
+            rowHeights.push(currRowHeight);
+
+            opts._width += traceGroupGap + maxWidth;
 
             groupXOffsets.push(opts._width);
         }
 
         groups.each(function(d, i) {
-            Drawing.setTranslate(this, groupXOffsets[i], 0);
+            Drawing.setTranslate(this, groupXOffsets[i], rowHeights[i]);
         });
 
         groups.each(function() {
@@ -620,11 +657,12 @@ function computeLegendDimensions(gd, groups, traces) {
 
                 groupHeight += textHeight;
             });
-
-            opts._height = Math.max(opts._height, groupHeight);
         });
 
-        opts._height += 10 + borderwidth * 2;
+        opts._height += rowNum * maxHeight;
+
+        var totalRows = Math.ceil(groupData.length / rowNum);
+        opts._width = (totalRows * (40 + maxWidth + traceGroupGap)) + 40;
         opts._width += borderwidth * 2;
     }
     else {

test/image/mocks/legendgroup_horizontal_wrapping.json

@@ -0,0 +1,57 @@
+{
+  "data": [{
+    "x": [1, 2, 3, 4],
+    "y": [63.69, 62.55, 61.64, 61.39],
+    "legendgroup": 1,
+    "name": "Trace A-1"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [58.24, 54.93, 42.11, 50.75],
+    "legendgroup": 1,
+    "name":"Trace A-2"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [51.49, 49.59, 37.12, 31.45],
+    "legendgroup":2,
+    "name":"Trace B-1"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [49.09, 58.54, 53.91, 43.12],
+    "legendgroup":2,
+    "name":"Trace B-2"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [70.53, 72.51, 72.28, 78.65],
+    "name":"Trace C-1"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [62.69, 59.09, 63.82, 62],
+    "legendgroup":3,
+    "name":"Trace D-1"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [76.27, 71.43, 59.83, 64.34],
+    "legendgroup":3,
+    "name":"Trace D-2"
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [71.15, 81.82, 88.46, 74.29],
+    "name":"Trace E-1"
+  }],
+  "layout": {
+    "width": 600,
+    "legend": {
+      "orientation": "h"
+    },
+    "xaxis": {
+      "type": "linear",
+      "range": [0.7840236686390533, 4.215976331360947],
+      "autorange": true
+    },
+    "yaxis": {
+      "type": "linear",
+      "range": [27.274108280254776, 92.63589171974522],
+      "autorange": true
+    }
+  }
+}