Merge pull request #6664 from plotly/per-legend-traceorder-dflt

Fix per legend `traceorder` defaults and legend groups in multi legends

Author: archmoj

draftlogs/6664_fix.md

@@ -0,0 +1 @@
+ - Fix per legend traceorder defaults and legend groups when having multiple legends [[#6664](https://github.com/plotly/plotly.js/pull/6664)]

src/components/legend/defaults.js

@@ -41,8 +41,12 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {
     var legendReallyHasATrace = false;
     var defaultOrder = 'normal';
 
-    for(var i = 0; i < fullData.length; i++) {
-        trace = fullData[i];
+    var allLegendItems = fullData.filter(function(d) {
+        return legendId === (d.legend || 'legend');
+    });
+
+    for(var i = 0; i < allLegendItems.length; i++) {
+        trace = allLegendItems[i];
 
         if(!trace.visible) continue;
 
@@ -87,10 +91,10 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {
 
     var showLegend = Lib.coerce(layoutIn, layoutOut,
         basePlotLayoutAttributes, 'showlegend',
-        legendReallyHasATrace && legendTraceCount > 1);
+        legendReallyHasATrace && (legendTraceCount > (legendId === 'legend' ? 1 : 0)));
 
     // delete legend
-    if(showLegend === false) layoutOut.legend = undefined;
+    if(showLegend === false) layoutOut[legendId] = undefined;
 
     if(showLegend === false && !containerIn.uirevision) return;
 
@@ -166,7 +170,7 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {
     }, 'y');
 
     coerce('traceorder', defaultOrder);
-    if(helpers.isGrouped(layoutOut.legend)) coerce('tracegroupgap');
+    if(helpers.isGrouped(layoutOut[legendId])) coerce('tracegroupgap');
 
     coerce('entrywidth');
     coerce('entrywidthmode');

test/jasmine/tests/legend_test.js

@@ -123,6 +123,31 @@ describe('legend defaults', function() {
         expect(layoutOut.legend.traceorder).toEqual('reversed');
     });
 
+    it('should default traceorder to reversed for stack bar charts | multi-legend case', function() {
+        fullData = allShown([
+            {type: 'scatter'},
+            {legend: 'legend2', type: 'bar', visible: 'legendonly'},
+            {legend: 'legend2', type: 'bar', visible: 'legendonly'},
+            {legend: 'legend2', type: 'scatter'},
+            {legend: 'legend3', type: 'scatter'}
+        ]);
+
+        layoutOut.legend2 = {};
+        layoutOut.legend3 = {};
+
+        supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+        expect(layoutOut.legend.traceorder).toEqual('normal');
+        expect(layoutOut.legend2.traceorder).toEqual('normal');
+        expect(layoutOut.legend3.traceorder).toEqual('normal');
+
+        layoutOut.barmode = 'stack';
+
+        supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+        expect(layoutOut.legend.traceorder).toEqual('normal');
+        expect(layoutOut.legend2.traceorder).toEqual('reversed');
+        expect(layoutOut.legend3.traceorder).toEqual('normal');
+    });
+
     it('should default traceorder to reversed for filled tonext scatter charts', function() {
         fullData = allShown([
             {type: 'scatter'},
@@ -148,6 +173,30 @@ describe('legend defaults', function() {
         expect(layoutOut.legend.traceorder).toEqual('grouped+reversed');
     });
 
+    it('should default traceorder to grouped when a group is present | multi-legend case', function() {
+        fullData = allShown([
+            {type: 'scatter'},
+            {legend: 'legend2', type: 'scatter', legendgroup: 'group'},
+            {legend: 'legend2', type: 'scatter'},
+            {legend: 'legend3', type: 'scatter'}
+        ]);
+
+        layoutOut.legend2 = {};
+        layoutOut.legend3 = {};
+
+        supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+        expect(layoutOut.legend.traceorder).toEqual('normal');
+        expect(layoutOut.legend2.traceorder).toEqual('grouped');
+        expect(layoutOut.legend3.traceorder).toEqual('normal');
+
+        fullData[1].fill = 'tonextx';
+
+        supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+        expect(layoutOut.legend.traceorder).toEqual('normal');
+        expect(layoutOut.legend2.traceorder).toEqual('reversed+grouped');
+        expect(layoutOut.legend3.traceorder).toEqual('normal');
+    });
+
     it('does not consider invisible traces for traceorder default', function() {
         fullData = allShown([
             {type: 'bar', visible: false},
@@ -169,6 +218,38 @@ describe('legend defaults', function() {
         expect(layoutOut.legend.traceorder).toEqual('normal');
     });
 
+    it('does not consider invisible traces for traceorder default | multi-legend case', function() {
+        fullData = allShown([
+            {type: 'scatter'},
+            {legend: 'legend2', type: 'bar', visible: false},
+            {legend: 'legend2', type: 'bar', visible: false},
+            {legend: 'legend2', type: 'scatter'},
+            {legend: 'legend3', type: 'scatter'},
+        ]);
+
+        layoutOut.legend2 = {};
+        layoutOut.legend3 = {};
+
+        layoutOut.barmode = 'stack';
+
+        supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+        expect(layoutOut.legend.traceorder).toEqual('normal');
+        expect(layoutOut.legend2.traceorder).toEqual('normal');
+        expect(layoutOut.legend3.traceorder).toEqual('normal');
+
+        fullData = allShown([
+            {type: 'scatter'},
+            {legend: 'legend2', type: 'scatter', legendgroup: 'group', visible: false},
+            {legend: 'legend2', type: 'scatter'},
+            {legend: 'legend3', type: 'scatter'}
+        ]);
+
+        supplyLayoutDefaults(layoutIn, layoutOut, fullData);
+        expect(layoutOut.legend.traceorder).toEqual('normal');
+        expect(layoutOut.legend2.traceorder).toEqual('normal');
+        expect(layoutOut.legend3.traceorder).toEqual('normal');
+    });
+
     it('should default orientation to vertical', function() {
         supplyLayoutDefaults(layoutIn, layoutOut, []);
         expect(layoutOut.legend.orientation).toEqual('v');