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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}

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,66 @@ module.exports = function getLegendData(calcdata, opts) {
  // won't draw a legend in this case
  if(!lgroups.length) return [];
 
- // 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);
+ // collapse all groups into one if all groups are blank
+ var shouldCollapse = !hasOneNonBlankGroup || !grouped;
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]];
- legendData[i] = helpers.isReversed(opts) ? ltraces.reverse() : ltraces;
+ var 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)];
+ }
+ if(shouldCollapse) legendData = [legendData];
+
+ for(i = 0; i < legendData.length; i++) {
+ // find minimum rank within group
+ var groupMinRank = Infinity;
+ for(j = 0; j < legendData[i].length; j++) {
+ var rank = legendData[i][j].trace.legendrank;
+ if(groupMinRank > rank) groupMinRank = rank;
+ }
+
+ // record on first group element
+ legendData[i][0]._groupMinRank = groupMinRank;
+ legendData[i][0]._preGroupSort = i;
+ }
 
- for(i = 0; i < lgroupsLength; i++) {
- ltraces = lgroupToTraces[lgroups[i]][0];
- legendData[0][helpers.isReversed(opts) ? lgroupsLength - i - 1 : i] = ltraces;
+ var orderFn1 = function(a, b) {
+ return (
+ (a[0]._groupMinRank - b[0]._groupMinRank) ||
+ (a[0]._preGroupSort - b[0]._preGroupSort) // fallback for old Chrome < 70 https://bugs.chromium.org/p/v8/issues/detail?id=90
+ );
+ };
+
+ var orderFn2 = 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
+ );
+ };
+
+ // sort considering minimum group legendrank
+ legendData.forEach(function(a, k) { a[0]._preGroupSort = k; });
+ legendData.sort(orderFn1);
+ for(i = 0; i < legendData.length; i++) {
+ // sort considering trace.legendrank and legend.traceorder
+ legendData[i].forEach(function(a, k) { a._preSort = k; });
+ legendData[i].sort(orderFn2);
+ if(reversed) legendData[i].reverse();
+
+ // rearrange lgroupToTraces into a d3-friendly array of arrays
+ 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 are presented on top/left side while',
+ 'with `*reversed* `legend.traceorder` they are 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]
+ }
+ }
+}

test/image/mocks/legendrank2.json

@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "name": "A",
+ "legendrank": 2,
+ "y": [-2]
+ },
+ {
+ "name": "D",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "E",
+ "legendrank": 4,
+ "y": [-4],
+ "legendgroup": "bottom"
+ },
+ {
+ "name": "B",
+ "legendrank": 1,
+ "y": [-1],
+ "legendgroup": "top"
+ },
+ {
+ "name": "C",
+ "legendrank": 3,
+ "y": [-3],
+ "legendgroup": "top"
+ }
+ ],
+ "layout": {
+ "title": {
+ "text": "rank groups using<br>minimum of the group"
+ },
+ "width": 300,
+ "height": 300,
+ "margin": {
+ "b": 25
+ },
+ "hovermode": "x unified"
+ }
+}