make offsetgroup work with barmode 'stacked' and 'relative' for bar traces

src/traces/bar/cross_trace_calc.js

@@ -75,7 +75,7 @@ function setGroupPositions(gd, pa, sa, calcTraces, opts) {
 
  switch(opts.mode) {
  case 'overlay':
- setGroupPositionsInOverlayMode(pa, sa, calcTraces, opts);
+ setGroupPositionsInOverlayMode(gd, pa, sa, calcTraces, opts);
  break;
 
  case 'group':
@@ -94,7 +94,7 @@ function setGroupPositions(gd, pa, sa, calcTraces, opts) {
  setGroupPositionsInGroupMode(gd, pa, sa, included, opts);
  }
  if(excluded.length) {
- setGroupPositionsInOverlayMode(pa, sa, excluded, opts);
+ setGroupPositionsInOverlayMode(gd, pa, sa, excluded, opts);
  }
  break;
 
@@ -119,7 +119,7 @@ function setGroupPositions(gd, pa, sa, calcTraces, opts) {
  setGroupPositionsInStackOrRelativeMode(gd, pa, sa, included, opts);
  }
  if(excluded.length) {
- setGroupPositionsInOverlayMode(pa, sa, excluded, opts);
+ setGroupPositionsInOverlayMode(gd, pa, sa, excluded, opts);
  }
  break;
  }
@@ -217,7 +217,7 @@ function initBase(sa, calcTraces) {
  }
 }
 
-function setGroupPositionsInOverlayMode(pa, sa, calcTraces, opts) {
+function setGroupPositionsInOverlayMode(gd, pa, sa, calcTraces, opts) {
  // update position axis and set bar offsets and widths
  for(var i = 0; i < calcTraces.length; i++) {
  var calcTrace = calcTraces[i];
@@ -229,7 +229,7 @@ function setGroupPositionsInOverlayMode(pa, sa, calcTraces, opts) {
  });
 
  // set bar offsets and widths, and update position axis
- setOffsetAndWidth(pa, sieve, opts);
+ setOffsetAndWidth(gd, pa, sieve, opts);
 
  // set bar bases and sizes, and update size axis
  //
@@ -253,7 +253,7 @@ function setGroupPositionsInGroupMode(gd, pa, sa, calcTraces, opts) {
  });
 
  // set bar offsets and widths, and update position axis
- setOffsetAndWidthInGroupMode(gd, pa, sieve, opts);
+ setOffsetAndWidth(gd, pa, sieve, opts);
 
  // relative-stack bars within the same trace that would otherwise
  // be hidden
@@ -276,20 +276,20 @@ function setGroupPositionsInStackOrRelativeMode(gd, pa, sa, calcTraces, opts) {
  });
 
  // set bar offsets and widths, and update position axis
- setOffsetAndWidth(pa, sieve, opts);
+ setOffsetAndWidth(gd, pa, sieve, opts);
 
  // set bar bases and sizes, and update size axis
  stackBars(sa, sieve, opts);
 
  // flag the outmost bar (for text display purposes)
  for(var i = 0; i < calcTraces.length; i++) {
  var calcTrace = calcTraces[i];
-
+ var offsetIndex = calcTrace[0].t.offsetindex;
  for(var j = 0; j < calcTrace.length; j++) {
  var bar = calcTrace[j];
 
  if(bar.s !== BADNUM) {
- var isOutmostBar = ((bar.b + bar.s) === sieve.get(bar.p, bar.s));
+ var isOutmostBar = ((bar.b + bar.s) === sieve.get(bar.p, offsetIndex, bar.s));
  if(isOutmostBar) bar._outmost = true;
  }
  }
@@ -300,43 +300,19 @@ function setGroupPositionsInStackOrRelativeMode(gd, pa, sa, calcTraces, opts) {
  if(opts.norm) normalizeBars(sa, sieve, opts);
 }
 
-function setOffsetAndWidth(pa, sieve, opts) {
- var minDiff = sieve.minDiff;
- var calcTraces = sieve.traces;
-
- // set bar offsets and widths
- var barGroupWidth = minDiff * (1 - opts.gap);
- var barWidthPlusGap = barGroupWidth;
- var barWidth = barWidthPlusGap * (1 - (opts.groupgap || 0));
-
- // computer bar group center and bar offset
- var offsetFromCenter = -barWidth / 2;
-
- for(var i = 0; i < calcTraces.length; i++) {
- var calcTrace = calcTraces[i];
- var t = calcTrace[0].t;
-
- // store bar width and offset for this trace
- t.barwidth = barWidth;
- t.poffset = offsetFromCenter;
- t.bargroupwidth = barGroupWidth;
- t.bardelta = minDiff;
- }
-
- // stack bars that only differ by rounding
- sieve.binWidth = calcTraces[0][0].t.barwidth / 100;
-
- // if defined, apply trace offset and width
- applyAttributes(sieve);
-
- // store the bar center in each calcdata item
- setBarCenterAndWidth(pa, sieve);
-
- // update position axes
- updatePositionAxis(pa, sieve);
-}
-
-function setOffsetAndWidthInGroupMode(gd, pa, sieve, opts) {
+/**
+ * Mode group: Traces should be offsetted to other traces at the same position if they have a
+ * different offsetgroup or if no offsetgroups are specified.
+ * If there are no other traces at the same position, the trace will not be offsetted and it
+ * can occupy the whole width.
+ * If two traces share an offsetgroup, they should overlap.
+ * Mode overlay/stack/relative: Traces should be offseted to other traces at the same position if
+ * they have a different offsetgroup.
+ * If two traces share an offsetgroup or if no offsetgroups are specified, they should instead
+ * overlap/stack.
+ * Angular axes (for barpolar type) don't support group offsets.
+ */
+function setOffsetAndWidth(gd, pa, sieve, opts) {
  var fullLayout = gd._fullLayout;
  var positions = sieve.positions;
  var distinctPositions = sieve.distinctPositions;
@@ -347,38 +323,48 @@ function setOffsetAndWidthInGroupMode(gd, pa, sieve, opts) {
  // if there aren't any overlapping positions,
  // let them have full width even if mode is group
  var overlap = (positions.length !== distinctPositions.length);
- var barGroupWidth = minDiff * (1 - opts.gap);
 
- var groupId = getAxisGroup(fullLayout, pa._id) + calcTraces[0][0].trace.orientation;
- var alignmentGroups = fullLayout._alignmentOpts[groupId] || {};
+ var barGroupWidth = minDiff * (1 - opts.gap);
+ var barWidthPlusGap;
+ var barWidth;
+ var offsetFromCenter;
+ var alignmentGroups;
+ if(pa._id === 'angularaxis') {
+ barWidthPlusGap = barGroupWidth;
+ barWidth = barWidthPlusGap * (1 - (opts.groupgap || 0));
+ offsetFromCenter = -barWidth / 2;
+ } else { // collect groups and calculate values in loop below
+ var groupId = getAxisGroup(fullLayout, pa._id) + calcTraces[0][0].trace.orientation;
+ alignmentGroups = fullLayout._alignmentOpts[groupId] || {};
+ }
 
  for(var i = 0; i < nTraces; i++) {
  var calcTrace = calcTraces[i];
  var trace = calcTrace[0].trace;
+ if(pa._id !== 'angularaxis') {
+ var alignmentGroupOpts = alignmentGroups[trace.alignmentgroup] || {};
+ var nOffsetGroups = Object.keys(alignmentGroupOpts.offsetGroups || {}).length;
 
- var alignmentGroupOpts = alignmentGroups[trace.alignmentgroup] || {};
- var nOffsetGroups = Object.keys(alignmentGroupOpts.offsetGroups || {}).length;
-
- var barWidthPlusGap;
- if(nOffsetGroups) {
- barWidthPlusGap = barGroupWidth / nOffsetGroups;
- } else {
- barWidthPlusGap = overlap ? barGroupWidth / nTraces : barGroupWidth;
- }
+ if(nOffsetGroups) {
+ barWidthPlusGap = barGroupWidth / nOffsetGroups;
+ } else {
+ barWidthPlusGap = overlap ? barGroupWidth / nTraces : barGroupWidth;
+ }
 
- var barWidth = barWidthPlusGap * (1 - (opts.groupgap || 0));
+   barWidth = barWidthPlusGap * (1 - (opts.groupgap || 0));
 
- var offsetFromCenter;
- if(nOffsetGroups) {
- offsetFromCenter = ((2 * trace._offsetIndex + 1 - nOffsetGroups) * barWidthPlusGap - barWidth) / 2;
- } else {
- offsetFromCenter = overlap ?
- ((2 * i + 1 - nTraces) * barWidthPlusGap - barWidth) / 2 :
-  -barWidth / 2;
+  if(nOffsetGroups) {
+  offsetFromCenter = ((2 * trace._offsetIndex + 1 - nOffsetGroups) * barWidthPlusGap - barWidth) / 2;
+ } else {
+  offsetFromCenter = overlap ?
+  ((2 * i + 1 - nTraces) * barWidthPlusGap - barWidth) / 2 :
+  -barWidth / 2;
+ }
  }
 
  var t = calcTrace[0].t;
  t.barwidth = barWidth;
+ t.offsetindex = trace._offsetIndex || 0;
  t.poffset = offsetFromCenter;
  t.bargroupwidth = barGroupWidth;
  t.bardelta = minDiff;
@@ -394,7 +380,11 @@ function setOffsetAndWidthInGroupMode(gd, pa, sieve, opts) {
  setBarCenterAndWidth(pa, sieve);
 
  // update position axes
- updatePositionAxis(pa, sieve, overlap);
+ if(pa._id === 'angularaxis') {
+ updatePositionAxis(pa, sieve);
+ } else {
+ updatePositionAxis(pa, sieve, overlap);
+ }
 }
 
 function applyAttributes(sieve) {
@@ -592,18 +582,20 @@ function stackBars(sa, sieve, opts) {
  var isFunnel;
  var i, j;
  var bar;
+ var offsetIndex;
 
  for(i = 0; i < calcTraces.length; i++) {
  calcTrace = calcTraces[i];
  fullTrace = calcTrace[0].trace;
 
  if(fullTrace.type === 'funnel') {
+ offsetIndex = calcTrace[0].t.offsetindex;
  for(j = 0; j < calcTrace.length; j++) {
  bar = calcTrace[j];
 
  if(bar.s !== BADNUM) {
  // create base of funnels
- sieve.put(bar.p, -0.5 * bar.s);
+ sieve.put(bar.p, offsetIndex, -0.5 * bar.s);
  }
  }
  }
@@ -615,6 +607,8 @@ function stackBars(sa, sieve, opts) {
 
  isFunnel = (fullTrace.type === 'funnel');
 
+ offsetIndex = fullTrace.type === 'barpolar' ? 0 : calcTrace[0].t.offsetindex;
+
  var pts = [];
 
  for(j = 0; j < calcTrace.length; j++) {
@@ -629,8 +623,7 @@ function stackBars(sa, sieve, opts) {
  value = bar.s + bar.b;
  }
 
- var base = sieve.put(bar.p, value);
-
+ var base = sieve.put(bar.p, offsetIndex, value);
  var top = base + value;
 
  // store the bar base and top in each calcdata item
@@ -663,12 +656,12 @@ function sieveBars(sieve) {
 
  for(var i = 0; i < calcTraces.length; i++) {
  var calcTrace = calcTraces[i];
-
+ var offsetIndex = calcTrace[0].t.offsetindex;
  for(var j = 0; j < calcTrace.length; j++) {
  var bar = calcTrace[j];
 
  if(bar.s !== BADNUM) {
- sieve.put(bar.p, bar.b + bar.s);
+ sieve.put(bar.p, offsetIndex, bar.b + bar.s);
  }
  }
  }
@@ -680,6 +673,7 @@ function unhideBarsWithinTrace(sieve, pa) {
  for(var i = 0; i < calcTraces.length; i++) {
  var calcTrace = calcTraces[i];
  var fullTrace = calcTrace[0].trace;
+ var offsetIndex = calcTrace[0].t.offsetindex;
 
  if(fullTrace.base === undefined) {
  var inTraceSieve = new Sieve([calcTrace], {
@@ -693,7 +687,7 @@ function unhideBarsWithinTrace(sieve, pa) {
 
  if(bar.p !== BADNUM) {
  // stack current bar and get previous sum
- var base = inTraceSieve.put(bar.p, bar.b + bar.s);
+ var base = inTraceSieve.put(bar.p, offsetIndex, bar.b + bar.s);
 
  // if previous sum if non-zero, this means:
  // multiple bars have same starting point are potentially hidden,
@@ -726,6 +720,7 @@ function normalizeBars(sa, sieve, opts) {
 
  for(var i = 0; i < calcTraces.length; i++) {
  var calcTrace = calcTraces[i];
+ var offsetIndex = calcTrace[0].t.offsetindex;
  var fullTrace = calcTrace[0].trace;
  var pts = [];
  var tozero = false;
@@ -735,7 +730,7 @@ function normalizeBars(sa, sieve, opts) {
  var bar = calcTrace[j];
 
  if(bar.s !== BADNUM) {
- var scale = Math.abs(sTop / sieve.get(bar.p, bar.s));
+ var scale = Math.abs(sTop / sieve.get(bar.p, offsetIndex, bar.s));
  bar.b *= scale;
  bar.s *= scale;
 

src/traces/bar/defaults.js

@@ -80,9 +80,7 @@ function crossTraceDefaults(fullData, fullLayout) {
  traceOut.marker.cornerradius = validateCornerradius(r);
  }
 
- if(fullLayout.barmode === 'group') {
- handleGroupingDefaults(traceIn, traceOut, fullLayout, coerce);
- }
+ handleGroupingDefaults(traceIn, traceOut, fullLayout, coerce, fullLayout.barmode);
  }
  }
 }

src/traces/bar/layout_defaults.js

@@ -19,6 +19,7 @@ module.exports = function(layoutIn, layoutOut, fullData) {
  var usedSubplots = {};
 
  var mode = coerce('barmode');
+ var isGroup = mode === 'group';
 
  for(var i = 0; i < fullData.length; i++) {
  var trace = fullData[i];
@@ -27,10 +28,17 @@ module.exports = function(layoutIn, layoutOut, fullData) {
 
  // if we have at least 2 grouped bar traces on the same subplot,
  // we should default to a gap anyway, even if the data is histograms
- if(mode === 'group') {
- var subploti = trace.xaxis + trace.yaxis;
+ var subploti = trace.xaxis + trace.yaxis;
+ if(isGroup) {
+ // with barmode group, bars are grouped next to each other when sharing the same axes
  if(usedSubplots[subploti]) gappedAnyway = true;
  usedSubplots[subploti] = true;
+ } else {
+ // with other barmodes bars are grouped next to each other when sharing the same axes
+ // and using different offsetgroups
+ subploti += trace._input.offsetgroup;
+ if(usedSubplots.length > 0 && !usedSubplots[subploti]) gappedAnyway = true;
+ usedSubplots[subploti] = true;
  }
 
  if(trace.visible && trace.type === 'histogram') {

src/traces/bar/sieve.js

@@ -66,11 +66,12 @@ function Sieve(traces, opts) {
  *
  * @method
  * @param {number} position
+ * @param {number} group
  * @param {number} value
  * @returns {number} Previous bin value
  */
-Sieve.prototype.put = function put(position, value) {
- var label = this.getLabel(position, value);
+Sieve.prototype.put = function put(position, group, value) {
+ var label = this.getLabel(position, group, value);
  var oldValue = this.bins[label] || 0;
 
  this.bins[label] = oldValue + value;
@@ -83,12 +84,13 @@ Sieve.prototype.put = function put(position, value) {
  *
  * @method
  * @param {number} position Position of datum
+ * @param {number} group
  * @param {number} [value] Value of datum
  * (required if this.sepNegVal is true)
  * @returns {number} Current bin value
  */
-Sieve.prototype.get = function get(position, value) {
- var label = this.getLabel(position, value);
+Sieve.prototype.get = function get(position, group, value) {
+ var label = this.getLabel(position, group, value);
  return this.bins[label] || 0;
 };
 
@@ -97,16 +99,17 @@ Sieve.prototype.get = function get(position, value) {
  *
  * @method
  * @param {number} position Position of datum
+ * @param {number} group
  * @param {number} [value] Value of datum
  * (required if this.sepNegVal is true)
  * @returns {string} Bin label
  * (prefixed with a 'v' if value is negative and this.sepNegVal is
  * true; otherwise prefixed with '^')
  */
-Sieve.prototype.getLabel = function getLabel(position, value) {
+Sieve.prototype.getLabel = function getLabel(position, group, value) {
  var prefix = (value < 0 && this.sepNegVal) ? 'v' : '^';
  var label = (this.overlapNoMerge) ?
  position :
  Math.round(position / this.binWidth);
- return prefix + label;
+ return prefix + label + 'g' + group;
 };