update box and meanline attribute syntax

- use nested attribute style for box and meanline settings
- update test and mocks

Author: etpinard

src/traces/box/hover.js

@@ -140,7 +140,7 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
     var attrs = ['med', 'min', 'q1', 'q3', 'max'];
     var prefixes = ['median', 'min', 'q1', 'q3', 'max'];
 
-    if(trace.boxmean || trace.showmeanline) {
+    if(trace.boxmean || (trace.meanline || {}).visible) {
         attrs.push('mean');
         prefixes.push(trace.boxmean === 'sd' ? 'mean ± σ' : 'mean');
     }

src/traces/box/plot.js

@@ -160,7 +160,7 @@ function plotPoints(sel, axes, trace, t) {
     var bdPos = t.bdPos;
     var bPos = t.bPos;
 
-    // to support violin innerbox
+    // to support violin points
     var mode = trace.boxpoints || trace.points;
 
     // repeatable pseudorandom number generator

src/traces/violin/attributes.js

@@ -138,72 +138,78 @@ module.exports = {
     marker: boxAttrs.marker,
     text: boxAttrs.text,
 
-    showinnerbox: {
-        valType: 'boolean',
-        dflt: false,
-        role: 'info',
-        editType: 'plot',
-        description: [
-            'Determines if an miniature box plot is drawn inside the violins. '
-        ].join(' ')
-    },
-    innerboxwidth: {
-        valType: 'number',
-        min: 0,
-        max: 1,
-        dflt: 0.25,
-        role: 'info',
-        editType: 'plot',
-        description: [
-            'Sets the width of the inner box plots relative to',
-            'the violins\' width.',
-            'For example, with 1, the inner box plots are as wide as the violins.'
-        ].join(' ')
-    },
-    innerboxlinecolor: {
-        valType: 'color',
-        role: 'style',
-        editType: 'style',
-        description: 'Sets the inner box plot bounding line color.'
-    },
-    innerboxfillcolor: {
-        valType: 'color',
-        role: 'style',
-        editType: 'style',
-        description: 'Sets the inner box plot fill color.'
-    },
-    innerboxlinewidth: {
-        valType: 'number',
-        min: 0,
-        role: 'style',
-        editType: 'style',
-        description: 'Sets the inner box plot bounding line width.'
+    box: {
+        visible: {
+            valType: 'boolean',
+            dflt: false,
+            role: 'info',
+            editType: 'plot',
+            description: [
+                'Determines if an miniature box plot is drawn inside the violins. '
+            ].join(' ')
+        },
+        width: {
+            valType: 'number',
+            min: 0,
+            max: 1,
+            dflt: 0.25,
+            role: 'info',
+            editType: 'plot',
+            description: [
+                'Sets the width of the inner box plots relative to',
+                'the violins\' width.',
+                'For example, with 1, the inner box plots are as wide as the violins.'
+            ].join(' ')
+        },
+        fillcolor: {
+            valType: 'color',
+            role: 'style',
+            editType: 'style',
+            description: 'Sets the inner box plot fill color.'
+        },
+        line: {
+            color: {
+                valType: 'color',
+                role: 'style',
+                editType: 'style',
+                description: 'Sets the inner box plot bounding line color.'
+            },
+            width: {
+                valType: 'number',
+                min: 0,
+                role: 'style',
+                editType: 'style',
+                description: 'Sets the inner box plot bounding line width.'
+            }
+        }
     },
 
-    showmeanline: {
-        valType: 'boolean',
-        dflt: false,
-        role: 'info',
-        editType: 'plot',
-        description: [
-            'Determines if a line corresponding to the sample\'s mean is shown',
-            'inside the violins.',
-            'If `showinnerbox` is turned on, the mean line is drawn inside the inner box.',
-            'Otherwise, the mean line is drawn from one side of the violin to other.'
-        ].join(' ')
-    },
-    meanlinecolor: {
-        valType: 'color',
-        role: 'style',
-        editType: 'style',
-        description: 'Sets the mean line color.'
-    },
-    meanlinewidth: {
-        valType: 'number',
-        min: 0,
-        role: 'style',
-        editType: 'style',
-        description: 'Sets the mean line width.'
+    meanline: {
+        visible: {
+            valType: 'boolean',
+            dflt: false,
+            role: 'info',
+            editType: 'plot',
+            description: [
+                'Determines if a line corresponding to the sample\'s mean is shown',
+                'inside the violins.',
+                'If `box.visible` is turned on, the mean line is drawn inside the inner box.',
+                'Otherwise, the mean line is drawn from one side of the violin to other.'
+            ].join(' ')
+        },
+        color: {
+            valType: 'color',
+            role: 'style',
+            editType: 'style',
+            description: 'Sets the mean line color.'
+        },
+        width: {
+            valType: 'number',
+            min: 0,
+            role: 'style',
+            editType: 'style',
+            description: 'Sets the mean line width.'
+        }
     },
 
     side: {

src/traces/violin/defaults.js

@@ -41,25 +41,15 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
 
     boxDefaults.handlePointsDefaults(traceIn, traceOut, coerce, {prefix: ''});
 
-    var show;
-
-    var innerBoxWidth = coerce2('innerboxwidth');
-    var innerBoxFillColor = coerce2('innerboxfillcolor', fillColor);
-    var innerBoxLineColor = coerce2('innerboxlinecolor', lineColor);
-    var innerBoxLineWidth = coerce2('innerboxlinewidth', lineWidth);
-    show = coerce('showinnerbox', Boolean(innerBoxWidth || innerBoxFillColor || innerBoxLineColor || innerBoxLineWidth));
-    if(!show) {
-        delete traceOut.innerboxwidth;
-        delete traceOut.innerboxfillcolor;
-        delete traceOut.innerboxlinecolor;
-        delete traceOut.innerboxlinewidth;
-    }
-
-    var meanLineColor = coerce2('meanlinecolor', lineColor);
-    var meanLineWidth = coerce2('meanlinewidth', lineWidth);
-    show = coerce('showmeanline', Boolean(meanLineColor || meanLineWidth));
-    if(!show) {
-        delete traceOut.meanlinecolor;
-        delete traceOut.meanlinewidth;
-    }
+    var boxWidth = coerce2('box.width');
+    var boxFillColor = coerce2('box.fillcolor', fillColor);
+    var boxLineColor = coerce2('box.line.color', lineColor);
+    var boxLineWidth = coerce2('box.line.width', lineWidth);
+    var boxVisible = coerce('box.visible', Boolean(boxWidth || boxFillColor || boxLineColor || boxLineWidth));
+    if(!boxVisible) delete traceOut.box;
+
+    var meanLineColor = coerce2('meanline.color', lineColor);
+    var meanLineWidth = coerce2('meanline.width', lineWidth);
+    var meanLineVisible = coerce('meanline.visible', Boolean(meanLineColor || meanLineWidth));
+    if(!meanLineVisible) delete traceOut.meanline;
 };

src/traces/violin/plot.js

@@ -60,6 +60,8 @@ module.exports = function plot(gd, plotinfo, cd) {
         var hasBothSides = trace.side === 'both';
         var hasPositiveSide = hasBothSides || trace.side === 'positive';
         var hasNegativeSide = hasBothSides || trace.side === 'negative';
+        var hasBox = trace.box && trace.box.visible;
+        var hasMeanLine = trace.meanline && trace.meanline.visible;
         var groupStats = fullLayout._violinScaleGroupStats[trace.scalegroup];
 
         sel.selectAll('path.violin')
@@ -128,28 +130,28 @@ module.exports = function plot(gd, plotinfo, cd) {
                 pathSel.attr('d', path);
 
                 // save a few things used in getPositionOnKdePath, getKdeValue
-                // on hover and for showmeanline
+                // on hover and for meanline draw block below
                 d.posCenterPx = posCenterPx;
                 d.posDensityScale = scale * bdPos;
                 d.path = pathSel.node();
                 d.pathLength = d.path.getTotalLength() / (hasBothSides ? 2 : 1);
             });
 
-        if(trace.showinnerbox) {
-            var innerBoxWidth = trace.innerboxwidth;
-            var innerBoxLineWidth = trace.innerboxlinewidth;
+        if(hasBox) {
+            var boxWidth = trace.box.width;
+            var boxLineWidth = trace.box.line.width;
             var bdPosScaled;
             var bPosPxOffset;
 
             if(hasBothSides) {
-                bdPosScaled = bdPos * innerBoxWidth;
+                bdPosScaled = bdPos * boxWidth;
                 bPosPxOffset = 0;
             } else if(hasPositiveSide) {
-                bdPosScaled = [0, bdPos * innerBoxWidth / 2];
-                bPosPxOffset = -innerBoxLineWidth;
+                bdPosScaled = [0, bdPos * boxWidth / 2];
+                bPosPxOffset = -boxLineWidth;
             } else {
-                bdPosScaled = [bdPos * innerBoxWidth / 2, 0];
-                bPosPxOffset = innerBoxLineWidth;
+                bdPosScaled = [bdPos * boxWidth / 2, 0];
+                bPosPxOffset = boxLineWidth;
             }
 
             // do not draw whiskers on inner boxes
@@ -161,10 +163,8 @@ module.exports = function plot(gd, plotinfo, cd) {
                 bPosPxOffset: bPosPxOffset
             });
 
-            // if both showinnerbox and showmeanline are turned on, show mean
-            // line inside inner box
-
-            if(trace.showmeanline) {
+            // if both box and meanline are visible, show mean line inside box
+            if(hasMeanLine) {
                 boxPlot.plotBoxMean(sel, {pos: posAxis, val: valAxis}, trace, {
                     bPos: bPos,
                     bdPos: bdPosScaled,
@@ -173,7 +173,7 @@ module.exports = function plot(gd, plotinfo, cd) {
             }
         }
         else {
-            if(trace.showmeanline) {
+            if(hasMeanLine) {
                 sel.selectAll('path.mean')
                     .data(Lib.identity)
                     .enter().append('path')

src/traces/violin/style.js

@@ -19,27 +19,29 @@ module.exports = function style(gd) {
         .each(function(d) {
             var trace = d[0].trace;
             var sel = d3.select(this);
+            var box = trace.box || {};
+            var boxLine = box.line || {};
+            var meanline = trace.meanline || {};
+            var meanLineWidth = meanline.width;
 
             sel.selectAll('path.violin')
                 .style('stroke-width', trace.line.width + 'px')
                 .call(Color.stroke, trace.line.color)
                 .call(Color.fill, trace.fillcolor);
 
             sel.selectAll('path.box')
-                .style('stroke-width', trace.innerboxlinewidth + 'px')
-                .call(Color.stroke, trace.innerboxlinecolor)
-                .call(Color.fill, trace.innerboxfillcolor);
+                .style('stroke-width', boxLine.width + 'px')
+                .call(Color.stroke, boxLine.color)
+                .call(Color.fill, box.fillcolor);
 
             sel.selectAll('g.points path')
                 .call(Drawing.pointStyle, trace, gd);
 
-            var meanLineWidth = trace.meanlinewidth;
-
             sel.selectAll('path.mean')
                 .style({
                     'stroke-width': meanLineWidth + 'px',
                     'stroke-dasharray': (2 * meanLineWidth) + 'px,' + meanLineWidth + 'px'
                 })
-                .call(Color.stroke, trace.meanlinecolor);
+                .call(Color.stroke, meanline.color);
         });
 };

test/image/mocks/violin_non-linear.json

@@ -13,7 +13,7 @@
         "orientation": "h",
         "xcalendar": "discworld",
         "name": "discworld dates",
-        "showinnerbox": true,
+        "box": {"visible": true},
         "xaxis": "x",
         "yaxis": "y"
     }, {
@@ -29,7 +29,7 @@
         ],
         "orientation": "h",
         "name": "categories",
-        "showinnerbox": true,
+        "box": {"visible": true},
         "xaxis": "x2",
         "yaxis": "y2"
 

test/image/mocks/violin_old-faithful.json

@@ -3,7 +3,7 @@
 		"type": "violin",
 		"points": "all",
 		"name": "Old Faithful",
-		"showmeanline": true,
+		"meanline": {"visible": true},
         "y": [79, 54, 74, 62, 85, 55, 88, 85, 51, 85, 54, 84, 78, 47, 83, 52, 62, 84, 52, 79, 51, 47, 78, 69, 74, 83, 55, 76, 78, 79, 73, 77, 66, 80, 74, 52, 48, 80, 59, 90, 80, 58, 84, 58, 73, 83, 64, 53, 82, 59, 75, 90, 54, 80, 54, 83, 71, 64, 77, 81, 59, 84, 48, 82, 60, 92, 78, 78, 65, 73, 82, 56, 79, 71, 62, 76, 60, 78, 76, 83, 75, 82, 70, 65, 73, 88, 76, 80, 48, 86, 60, 90, 50, 78, 63, 72, 84, 75, 51, 82, 62, 88, 49, 83, 81, 47, 84, 52, 86, 81, 75, 59, 89, 79, 59, 81, 50, 85, 59, 87, 53, 69, 77, 56, 88, 81, 45, 82, 55, 90, 45, 83, 56, 89, 46, 82, 51, 86, 53, 79, 81, 60, 82, 77, 76, 59, 80, 49, 96, 53, 77, 77, 65, 81, 71, 70, 81, 93, 53, 89, 45, 86, 58, 78, 66, 76, 63, 88, 52, 93, 49, 57, 77, 68, 81, 81, 73, 50, 85, 74, 55, 77, 83, 83, 51, 78, 84, 46, 83, 55, 81, 57, 76, 84, 77, 81, 87, 77, 51, 78, 60, 82, 91, 53, 78, 46, 77, 84, 49, 83, 71, 80, 49, 75, 64, 76, 53, 94, 55, 76, 50, 82, 54, 75, 78, 79, 78, 78, 70, 79, 70, 54, 86, 50, 90, 54, 54, 77, 79, 64, 75, 47, 86, 63, 85, 82, 57, 82, 67, 74, 54, 83, 73, 73, 88, 80, 71, 83, 56, 79, 78, 84, 58, 83, 43, 60, 75, 81, 46, 90, 46, 74 ]
     }]
 }