Implement legendrank attribute in traces

src/components/legend/get_legend_data.js

@@ -4,6 +4,9 @@ var Registry = require('../../registry');
 var helpers = require('./helpers');
 
 module.exports = function getLegendData(calcdata, opts) {
+    var grouped = helpers.isGrouped(opts);
+    var reversed = helpers.isReversed(opts);
+
     var lgroupToTraces = {};
     var lgroups = [];
     var hasOneNonBlankGroup = false;
@@ -18,14 +21,14 @@ module.exports = function getLegendData(calcdata, opts) {
             // TODO: check this against fullData legendgroups?
             var uniqueGroup = '~~i' + lgroupi;
             lgroups.push(uniqueGroup);
-            lgroupToTraces[uniqueGroup] = [[legendItem]];
+            lgroupToTraces[uniqueGroup] = [legendItem];
             lgroupi++;
         } else if(lgroups.indexOf(legendGroup) === -1) {
             lgroups.push(legendGroup);
             hasOneNonBlankGroup = true;
-            lgroupToTraces[legendGroup] = [[legendItem]];
+            lgroupToTraces[legendGroup] = [legendItem];
         } else {
-            lgroupToTraces[legendGroup].push([legendItem]);
+            lgroupToTraces[legendGroup].push(legendItem);
         }
     }
 
@@ -66,31 +69,45 @@ module.exports = function getLegendData(calcdata, opts) {
     // won't draw a legend in this case
     if(!lgroups.length) return [];
 
+    // collapse all groups into one if all groups are blank
+    var shouldCollapse = !hasOneNonBlankGroup || !grouped;
+
     // rearrange lgroupToTraces into a d3-friendly array of arrays
-    var lgroupsLength = lgroups.length;
-    var ltraces;
     var legendData;
 
-    if(hasOneNonBlankGroup && helpers.isGrouped(opts)) {
-        legendData = new Array(lgroupsLength);
-
-        for(i = 0; i < lgroupsLength; i++) {
-            ltraces = lgroupToTraces[lgroups[i]];
-            legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+    legendData = [];
+    for(i = 0; i < lgroups.length; i++) {
+        var t = lgroupToTraces[lgroups[i]];
+        if(shouldCollapse) {
+            legendData.push(t[0]);
+        } else {
+            legendData.push(t);
         }
-    } else {
-        // collapse all groups into one if all groups are blank
-        legendData = [new Array(lgroupsLength)];
-
-        for(i = 0; i < lgroupsLength; i++) {
-            ltraces = lgroupToTraces[lgroups[i]][0];
-            legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+    }
+    if(shouldCollapse) legendData = [legendData];
+
+    var orderFn = function(a, b) {
+        return (
+            (a.trace.legendrank - b.trace.legendrank) ||
+            (a._preSort - b._preSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+        );
+    };
+    for(i = 0; i < legendData.length; i++) {
+        // sort considering trace.legendrank and legend.traceorder
+        legendData[i].forEach(function(a, i) { a._preSort = i; });
+        legendData[i].sort(orderFn);
+        if(reversed) legendData[i].reverse();
+
+        // add extra dim
+        for(j = 0; j < legendData[i].length; j++) {
+            legendData[i][j] = [
+                legendData[i][j]
+            ];
         }
-        lgroupsLength = 1;
     }
 
     // number of legend groups - needed in legend/draw.js
-    opts._lgroupsLength = lgroupsLength;
+    opts._lgroupsLength = legendData.length;
     // maximum name/label length - needed in legend/draw.js
     opts._maxNameLength = maxNameLength;
 

src/plots/attributes.js

@@ -41,6 +41,19 @@ module.exports = {
             'when toggling legend items.'
         ].join(' ')
     },
+    legendrank: {
+        valType: 'number',
+        dflt: 1000,
+        editType: 'style',
+        description: [
+            'Sets the legend rank for this trace.',
+            'Items and groups with smaller ranks would be presented on top/left side while',
+            'with `*reversed* `legend.traceorder` they would be on bottom/right side.',
+            'The default legendrank is 1000,',
+            'so that you can use ranks less than 1000 to place certain items before all unranked items,',
+            'and ranks greater than 1000 to go after all unranked items.'
+        ].join(' ')
+    },
     opacity: {
         valType: 'number',
         min: 0,

src/plots/plots.js

@@ -1309,6 +1309,7 @@ plots.supplyTraceDefaults = function(traceIn, traceOut, colorIndex, layout, trac
             );
 
             coerce('legendgroup');
+            coerce('legendrank');
 
             traceOut._dfltShowLegend = true;
         } else {

src/traces/parcats/attributes.js

@@ -198,6 +198,7 @@ module.exports = {
     hoverlabel: undefined,
     ids: undefined,
     legendgroup: undefined,
+    legendrank: undefined,
     opacity: undefined,
     selectedpoints: undefined,
     showlegend: undefined

test/image/mocks/legendrank.json

@@ -0,0 +1,51 @@
+{
+  "data": [
+    {"type": "bar", "name": "1", "y": [1], "yaxis": "y2", "legendgroup": "two", "legendrank": 3},
+    {
+      "legendrank": 2,
+      "legendgroup": "pie",
+      "type": "pie",
+      "labels": ["a","b","c","c","c","a"],
+      "textinfo": "none",
+      "domain": {
+        "x": [0, 0.45],
+        "y": [0.35, 0.65]
+      }
+    },
+    {
+      "legendrank": 1,
+      "legendgroup": "pie",
+      "type": "pie",
+      "labels": ["z","x","x","x","y", "y"],
+      "sort": false,
+      "textinfo": "none",
+      "domain": {
+        "x": [0.55, 1],
+        "y": [0.35, 0.65]
+      }
+    },
+    {"type": "scatter", "name": "2", "y": [2], "yaxis": "y", "legendgroup": "one", "legendrank": 2},
+    {"type": "scatter", "name": "1", "y": [1], "yaxis": "y", "legendgroup": "one", "legendrank": 1},
+    {"type": "bar", "name": "2", "y": [2], "yaxis": "y2", "legendgroup": "two", "legendrank": 2},
+    {"type": "scatter", "name": "3", "y": [3], "yaxis": "y", "legendgroup": "one", "legendrank": 3},
+    {"type": "bar", "name": "3", "y": [3], "yaxis": "y2", "legendgroup": "two", "legendrank": 1}
+  ],
+  "layout": {
+    "title": {
+      "text": "legendrank"
+    },
+    "hovermode": "x unified",
+    "margin": {
+      "t": 50
+    },
+    "width": 300,
+    "height": 400,
+    "yaxis2": {
+      "domain": [0.7, 1]
+    },
+    "yaxis": {
+      "autorange": "reversed",
+      "domain": [0, 0.3]
+    }
+  }
+}