🔪 handling of horizontal legendgroup

Author: antoinerg

src/components/legend/draw.js

@@ -585,48 +585,6 @@ function computeLegendDimensions(gd, groups, traces) {
 
         extraWidth = 40;
     }
-    else if(isGrouped) {
-        var groupXOffsets = [opts._width];
-        var groupData = groups.data();
-
-        for(var i = 0, n = groupData.length; i < n; i++) {
-            var textWidths = groupData[i].map(function(legendItemArray) {
-                return legendItemArray[0].width;
-            });
-
-            var groupWidth = 40 + Math.max.apply(null, textWidths);
-
-            opts._width += opts.tracegroupgap + groupWidth;
-
-            groupXOffsets.push(opts._width);
-        }
-
-        groups.each(function(d, i) {
-            Drawing.setTranslate(this, groupXOffsets[i], 0);
-        });
-
-        groups.each(function() {
-            var group = d3.select(this);
-            var groupTraces = group.selectAll('g.traces');
-            var groupHeight = 0;
-
-            groupTraces.each(function(d) {
-                var legendItem = d[0];
-                var textHeight = legendItem.height;
-
-                Drawing.setTranslate(this,
-                    0,
-                    (5 + borderwidth + groupHeight + textHeight / 2));
-
-                groupHeight += textHeight;
-            });
-
-            opts._height = Math.max(opts._height, groupHeight);
-        });
-
-        opts._height += 10 + borderwidth * 2;
-        opts._width += borderwidth * 2;
-    }
     else {
         var rowHeight = 0;
         var maxTraceHeight = 0;

test/image/baselines/legend_horizontal_groups.png

@@ -0,0 +1,51 @@
+{
+  "data": [{
+    "x": [1, 2, 3, 4],
+    "y": [63.69, 62.55, 61.64, 61.39],
+    "legendgroup": 1
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [58.24, 54.93, 42.11, 50.75],
+    "legendgroup": 1
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [51.49, 49.59, 37.12, 31.45]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [49.09, 58.54, 53.91, 43.12]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [70.53, 72.51, 72.28, 78.65]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [62.69, 59.09, 63.82, 62]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [76.27, 71.43, 59.83, 64.34]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [71.15, 81.82, 88.46, 74.29]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [57.89, 57.38, 52.08, 63.83]
+  }, {
+    "x": [1, 2, 3, 4],
+    "y": [65.4, 63.27, 65.78, 64.03]
+  }],
+  "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
+    }
+  }
+}