add 'width' to box and violin trace

src/traces/box/attributes.js

@@ -171,6 +171,20 @@ module.exports = {
             'the vertical (horizontal).'
         ].join(' ')
     },
+
+    width: {
+        valType: 'number',
+        min: 0,
+        role: 'info',
+        dflt: 0,
+        editType: 'calc',
+        description: [
+            'Sets the width of the box.',
+            'If *0* (default value) the width is automatically selected based on the positions',
+            'of other box traces in the same subplot.',
+        ].join(' ')
+    },
+
     marker: {
         outliercolor: {
             valType: 'color',
@@ -244,7 +258,6 @@ module.exports = {
         marker: scatterAttrs.unselected.marker,
         editType: 'style'
     },
-
     hoveron: {
         valType: 'flaglist',
         flags: ['boxes', 'points'],

src/traces/box/cross_trace_calc.js

@@ -13,6 +13,11 @@ var Lib = require('../../lib');
 
 var orientations = ['v', 'h'];
 
+
+function getPosition(di) {
+    return di.pos;
+}
+
 function crossTraceCalc(gd, plotinfo) {
     var calcdata = gd.calcdata;
     var xa = plotinfo.xaxis;
@@ -90,19 +95,24 @@ function setPositionOffset(traceType, gd, boxList, posAxis, pad) {
     var groupgap = fullLayout[traceType + 'groupgap'];
     var padfactor = (1 - gap) * (1 - groupgap) * dPos / fullLayout[numKey];
 
-    // autoscale the x axis - including space for points if they're off the side
-    // TODO: this will overdo it if the outermost boxes don't have
-    // their points as far out as the other boxes
-    var extremes = Axes.findExtremes(posAxis, boxdv.vals, {
-        vpadminus: dPos + pad[0] * padfactor,
-        vpadplus: dPos + pad[1] * padfactor
-    });
-
+    // Find maximum trace width
+    // we baseline this at dPos
     for(i = 0; i < boxList.length; i++) {
         calcTrace = calcdata[boxList[i]];
-        // set the width of all boxes
-        calcTrace[0].t.dPos = dPos;
-        // link extremes to all boxes
+        // set the width of this box
+        // override dPos with trace.width if present
+        var thisDPos = calcTrace[0].t.dPos = (calcTrace[0].trace.width / 2) || dPos;
+        var positions = calcTrace.map(getPosition);
+        // autoscale the x axis - including space for points if they're off the side
+        // TODO: this will overdo it if the outermost boxes don't have
+        // their points as far out as the other boxes
+        var side = calcTrace[0].trace.side;
+        var vpadminus = (side === 'positive') ? 0 : (thisDPos + pad[0] * padfactor);
+        var vpadplus = (side === 'negative') ? 0 : (thisDPos + pad[1] * padfactor);
+        var extremes = Axes.findExtremes(posAxis, positions, {
+            vpadminus: vpadminus,
+            vpadplus: vpadplus
+        });
         calcTrace[0].trace._extremes[posAxis._id] = extremes;
     }
 

src/traces/box/defaults.js

@@ -28,6 +28,7 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
 
     coerce('whiskerwidth');
     coerce('boxmean');
+    coerce('width');
 
     var notched = coerce('notched', traceIn.notchwidth !== undefined);
     if(notched) coerce('notchwidth');

src/traces/violin/attributes.js

@@ -135,6 +135,20 @@ module.exports = {
             'right (left) for vertical violins and above (below) for horizontal violins.'
         ].join(' ')
     }),
+
+    width: {
+        valType: 'number',
+        min: 0,
+        role: 'info',
+        dflt: 0,
+        editType: 'calc',
+        description: [
+            'Sets the width of the violin.',
+            'If *0* (default value) the width is automatically selected based on the positions',
+            'of other violin traces in the same subplot.',
+        ].join(' ')
+    },
+
     marker: boxAttrs.marker,
     text: boxAttrs.text,
 

src/traces/violin/defaults.js

@@ -26,9 +26,15 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     if(traceOut.visible === false) return;
 
     coerce('bandwidth');
-    coerce('scalegroup', traceOut.name);
-    coerce('scalemode');
     coerce('side');
+    var width = coerce('width');
+    if(!width) {
+        coerce('scalegroup', traceOut.name);
+        coerce('scalemode');
+    } else {
+        traceOut.scalegroup = '';
+        traceOut.scalemode = 'width';
+    }
 
     var span = coerce('span');
     var spanmodeDflt;

test/image/mocks/violin_box_multiple_widths.json

@@ -0,0 +1,64 @@
+{
+    "data": [{
+            "type": "violin",
+            "width": 0.315,
+            "x": [0, 5, 7, 8],
+            "points": "none",
+            "side": "positive",
+            "box": {
+              "visible": false
+            },
+            "boxpoints": false,
+            "line": {
+                "color": "black"
+            },
+            "fillcolor": "#8dd3c7",
+            "opacity": 0.6,
+            "meanline": {
+                "visible": false
+            },
+            "y0": 0.0
+        }, {
+            "type": "violin",
+            "x": [0, 5, 7, 8],
+            "points": "none",
+            "side": "positive",
+            "box": {
+              "visible": false
+            },
+            "boxpoints": false,
+            "line": {
+                "color": "black"
+            },
+            "fillcolor": "#d3c78d",
+            "opacity": 0.6,
+            "meanline": {
+                "visible": false
+            },
+            "y0": 0.1
+        }, {
+            "type": "box",
+            "width": 0.5421,
+            "x": [0, 5, 7, 8],
+            "points": "none",
+            "side": "positive",
+            "box": {
+              "visible": false
+            },
+            "boxpoints": false,
+            "line": {
+                "color": "black"
+            },
+            "fillcolor": "#c78dd3",
+            "opacity": 0.6,
+            "meanline": {
+                "visible": false
+            },
+            "y0": 0.2
+    }],
+    "layout": {
+        "title": "Joyplot - Violin with multiple widths",
+        "xaxis": {"zeroline": false},
+        "violingap": 0
+    }
+}

test/jasmine/tests/violin_test.js

@@ -533,7 +533,7 @@ describe('Test violin hover:', function() {
 
             Plotly.plot(gd, fig).then(function() {
                 mouseEvent('mousemove', 300, 250);
-                assertViolinHoverLine([299.35, 250, 250, 250]);
+                assertViolinHoverLine([178.67823028564453, 250, 80, 250]);
             })
             .catch(failTest)
             .then(done);
@@ -544,7 +544,7 @@ describe('Test violin hover:', function() {
 
             Plotly.plot(gd, fig).then(function() {
                 mouseEvent('mousemove', 200, 250);
-                assertViolinHoverLine([200.65, 250, 250, 250]);
+                assertViolinHoverLine([321.3217315673828, 250, 420, 250]);
             })
             .catch(failTest)
             .then(done);