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

my-tien · my-tien · commit d3b5068b6752 · 2024-06-01T15:54:16.000+02:00
diff --git a/src/traces/bar/cross_trace_calc.js b/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,7 +276,7 @@ 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);
@@ -300,43 +300,7 @@ 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) {
+function setOffsetAndWidth(gd, pa, sieve, opts) {
     var fullLayout = gd._fullLayout;
     var positions = sieve.positions;
     var distinctPositions = sieve.distinctPositions;
@@ -615,6 +579,7 @@ function stackBars(sa, sieve, opts) {
 
         isFunnel = (fullTrace.type === 'funnel');
 
+        var offset = calcTrace[0].t.poffset;
         var pts = [];
 
         for(j = 0; j < calcTrace.length; j++) {
@@ -629,8 +594,7 @@ function stackBars(sa, sieve, opts) {
                     value = bar.s + bar.b;
                 }
 
-                var base = sieve.put(bar.p, value);
-
+                var base = sieve.put(bar.p + offset, value);
                 var top = base + value;
 
                 // store the bar base and top in each calcdata item
diff --git a/src/traces/bar/defaults.js b/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(fullLayout.barmode, traceIn, traceOut, fullLayout, coerce);
         }
     }
 }
diff --git a/src/traces/bar/layout_defaults.js b/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[subploti]) gappedAnyway = true;
+            usedSubplots[subploti] = true;
         }
 
         if(trace.visible && trace.type === 'histogram') {
diff --git a/src/traces/scatter/grouping_defaults.js b/src/traces/scatter/grouping_defaults.js
@@ -2,7 +2,7 @@
 
 var getAxisGroup = require('../../plots/cartesian/constraints').getAxisGroup;
 
-module.exports = function handleGroupingDefaults(traceIn, traceOut, fullLayout, coerce) {
+module.exports = function handleGroupingDefaults(barmode, traceIn, traceOut, fullLayout, coerce) {
     var orientation = traceOut.orientation;
     // N.B. grouping is done across all trace types that support it
     var posAxId = traceOut[{v: 'x', h: 'y'}[orientation] + 'axis'];
@@ -29,8 +29,9 @@ module.exports = function handleGroupingDefaults(traceIn, traceOut, fullLayout,
     var offsetgroup = coerce('offsetgroup');
     var offsetGroups = alignmentGroupOpts.offsetGroups;
     var offsetGroupOpts = offsetGroups[offsetgroup];
-
-    if(offsetgroup) {
+    // in barmode 'group', traces without offsetgroup receive their own offsetgroup
+    // in other barmodes, traces without offsetgroup are assigned to the same offset group
+    if(barmode !== 'group' || offsetgroup) {
         if(!offsetGroupOpts) {
             offsetGroupOpts = offsetGroups[offsetgroup] = {
                 offsetIndex: Object.keys(offsetGroups).length
diff --git a/test/image/mocks/zzz_bar_relative_offsetgroup.json b/test/image/mocks/zzz_bar_relative_offsetgroup.json
@@ -0,0 +1,48 @@
+{
+    "data": [
+      {
+        "type": "bar",
+        "x": [ "A", "B", "C"],
+        "y": [ 10, 10, 10 ],
+        "offsetgroup": 1,
+        "hovertext": "offsetgroup: 1"
+      },
+      {
+        "type": "bar",
+        "x": [ "A", "B", "C"],
+        "y": [ 20, 20, 20 ],
+        "offsetgroup": 1,
+        "hovertext": "offsetgroup: 1"
+      },
+      {
+        "type": "bar",
+        "x": [ "A", "B", "C"],
+        "y": [ 30, 30, 30 ],
+        "offsetgroup": 2,
+        "hovertext": "offsetgroup: 2"
+      },
+      {
+        "type": "bar",
+        "x": [ "A", "B", "C"],
+        "y": [ 40, 40, 40 ],
+        "offsetgroup": 2,
+        "hovertext": "offsetgroup: 2"
+      },
+      {
+        "type": "bar",
+        "x": [ "A", "B", "C"],
+        "y": [ -50, 50, 50 ],
+        "offsetgroup": 2,
+        "hovertext": "offsetgroup: 2"
+      }
+    ],
+    "layout": {
+        "width": 600,
+      "showlegend": false,
+      "barmode": "relative",
+      "title": {
+        "text": "Separately stacked bars with barmode 'relative'"
+      }
+    }
+  }
+  

Original file line number	Diff line number	Diff line change
`@@ -80,9 +80,7 @@ function crossTraceDefaults(fullData, fullLayout) {`
`80`	`80`	`traceOut.marker.cornerradius = validateCornerradius(r);`
`81`	`81`	`}`
`82`	`82`
`83`		`- if(fullLayout.barmode === 'group') {`
`84`		`- handleGroupingDefaults(traceIn, traceOut, fullLayout, coerce);`
`85`		`- }`
	`83`	`+ handleGroupingDefaults(fullLayout.barmode, traceIn, traceOut, fullLayout, coerce);`
`86`	`84`	`}`
`87`	`85`	`}`
`88`	`86`	`}`