ignore box/violin *gap and *groupgap when 'width' is set

Author: etpinard

src/traces/box/layout_attributes.js

@@ -22,7 +22,8 @@ module.exports = {
             'If *group*, the boxes are plotted next to one another',
             'centered around the shared location.',
             'If *overlay*, the boxes are plotted over one another,',
-            'you might need to set *opacity* to see them multiple boxes.'
+            'you might need to set *opacity* to see them multiple boxes.',
+            'Has no effect on traces that have *width* set.'
         ].join(' ')
     },
     boxgap: {
@@ -34,7 +35,8 @@ module.exports = {
         editType: 'calc',
         description: [
             'Sets the gap (in plot fraction) between boxes of',
-            'adjacent location coordinates.'
+            'adjacent location coordinates.',
+            'Has no effect on traces that have *width* set.'
         ].join(' ')
     },
     boxgroupgap: {
@@ -46,7 +48,8 @@ module.exports = {
         editType: 'calc',
         description: [
             'Sets the gap (in plot fraction) between boxes of',
-            'the same location coordinate.'
+            'the same location coordinate.',
+            'Has no effect on traces that have *width* set.'
         ].join(' ')
     }
 };

src/traces/box/plot.js

@@ -22,19 +22,32 @@ function plot(gd, plotinfo, cdbox, boxLayer) {
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
     var numBoxes = fullLayout._numBoxes;
-    var groupFraction = (1 - fullLayout.boxgap);
     var group = (fullLayout.boxmode === 'group' && numBoxes > 1);
+    var groupFraction = (1 - fullLayout.boxgap);
+    var groupGapFraction = 1 - fullLayout.boxgroupgap;
 
     Lib.makeTraceGroups(boxLayer, cdbox, 'trace boxes').each(function(cd) {
         var plotGroup = d3.select(this);
         var cd0 = cd[0];
         var t = cd0.t;
         var trace = cd0.trace;
         if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
-        // box half width
-        var bdPos = t.dPos * groupFraction * (1 - fullLayout.boxgroupgap) / (group ? numBoxes : 1);
+
+        // position coordinate delta
+        var dPos = t.dPos;
+        // box half width;
+        var bdPos;
         // box center offset
-        var bPos = group ? 2 * t.dPos * (-0.5 + (t.num + 0.5) / numBoxes) * groupFraction : 0;
+        var bPos;
+
+        if(trace.width) {
+            bdPos = dPos;
+            bPos = 0;
+        } else {
+            bdPos = dPos * groupFraction * groupGapFraction / (group ? numBoxes : 1);
+            bPos = group ? 2 * dPos * (-0.5 + (t.num + 0.5) / numBoxes) * groupFraction : 0;
+        }
+
         // whisker width
         var wdPos = bdPos * trace.whiskerwidth;
 

src/traces/violin/layout_attributes.js

@@ -19,19 +19,22 @@ module.exports = {
             'If *group*, the violins are plotted next to one another',
             'centered around the shared location.',
             'If *overlay*, the violins are plotted over one another,',
-            'you might need to set *opacity* to see them multiple violins.'
+            'you might need to set *opacity* to see them multiple violins.',
+            'Has no effect on traces that have *width* set.'
         ].join(' ')
     }),
     violingap: extendFlat({}, boxLayoutAttrs.boxgap, {
         description: [
             'Sets the gap (in plot fraction) between violins of',
-            'adjacent location coordinates.'
+            'adjacent location coordinates.',
+            'Has no effect on traces that have *width* set.'
         ].join(' ')
     }),
     violingroupgap: extendFlat({}, boxLayoutAttrs.boxgroupgap, {
         description: [
             'Sets the gap (in plot fraction) between violins of',
-            'the same location coordinate.'
+            'the same location coordinate.',
+            'Has no effect on traces that have *width* set.'
         ].join(' ')
     })
 };

src/traces/violin/plot.js

@@ -20,6 +20,10 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
     var fullLayout = gd._fullLayout;
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
+    var numViolins = fullLayout._numViolins;
+    var group = (fullLayout.violinmode === 'group' && numViolins > 1);
+    var groupFraction = 1 - fullLayout.violingap;
+    var groupGapFraction = 1 - fullLayout.violingroupgap;
 
     function makePath(pts) {
         var segments = linePoints(pts, {
@@ -39,16 +43,30 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
         var t = cd0.t;
         var trace = cd0.trace;
         if(!plotinfo.isRangePlot) cd0.node3 = plotGroup;
-        var numViolins = fullLayout._numViolins;
-        var group = (fullLayout.violinmode === 'group' && numViolins > 1);
-        var groupFraction = 1 - fullLayout.violingap;
+
+        // position coordinate delta
+        var dPos = t.dPos;
         // violin max half width
-        var bdPos = t.bdPos = t.dPos * groupFraction * (1 - fullLayout.violingroupgap) / (group ? numViolins : 1);
+        var bdPos;
         // violin center offset
-        var bPos = t.bPos = group ? 2 * t.dPos * (-0.5 + (t.num + 0.5) / numViolins) * groupFraction : 0;
+        var bPos;
         // half-width within which to accept hover for this violin
         // always split the distance to the closest violin
-        t.wHover = t.dPos * (group ? groupFraction / numViolins : 1);
+        var wHover;
+
+        if(trace.width) {
+            bdPos = dPos;
+            bPos = 0;
+            wHover = dPos;
+        } else {
+            bdPos = dPos * groupFraction * groupGapFraction / (group ? numViolins : 1);
+            bPos = group ? 2 * dPos * (-0.5 + (t.num + 0.5) / numViolins) * groupFraction : 0;
+            wHover = dPos * (group ? groupFraction / numViolins : 1);
+        }
+
+        t.bdPos = bdPos;
+        t.bPos = bPos;
+        t.wHover = wHover;
 
         if(trace.visible !== true || t.empty) {
             plotGroup.remove();

test/image/baselines/violin_box_multiple_widths.png

@@ -1,7 +1,8 @@
 {
     "data": [{
             "type": "violin",
-            "width": 0.315,
+            "width": 0.4,
+            "name": "width: 0.4",
             "x": [0, 5, 7, 8],
             "side": "positive",
             "line": {
@@ -12,6 +13,7 @@
             "y0": 0.0
         }, {
             "type": "violin",
+            "name": "auto",
             "x": [0, 5, 7, 8],
             "side": "positive",
             "line": {
@@ -22,7 +24,8 @@
             "y0": 0.1
         }, {
             "type": "box",
-            "width": 0.5421,
+            "width": 0.6,
+            "name": "width: 0.6",
             "x": [0, 5, 7, 8],
             "side": "positive",
             "line": {
@@ -34,7 +37,8 @@
     }],
     "layout": {
         "title": "Joyplot - Violin with multiple widths",
+        "legend": {"x": 0},
         "xaxis": {"zeroline": false},
-        "violingap": 0
+        "yaxis": {"dtick": 0.1, "gridcolor": "black"}
     }
 }