implement violin 'inner' style options

- i.e. showinnerbox & showmeanline and friends.

Author: etpinard

src/traces/violin/attributes.js

@@ -99,12 +99,6 @@ module.exports = {
         ].join(' ')
     },
 
-    // TODO need attribute(s) similar to 'boxmean' to toggle lines for:
-    // - mean
-    // - median
-    // - std
-    // - quartiles
-
     line: {
         color: {
             valType: 'color',
@@ -123,6 +117,70 @@ module.exports = {
         editType: 'plot'
     },
     fillcolor: boxAttrs.fillcolor,
+
+    // TODO update description
+    points: boxAttrs.boxpoints,
+    jitter: boxAttrs.jitter,
+    pointpos: boxAttrs.pointpos,
+    marker: boxAttrs.marker,
+    text: boxAttrs.text,
+
+    showinnerbox: {
+        valType: 'boolean',
+        dflt: false,
+        role: 'info',
+        editType: 'plot',
+        description: '.'
+    },
+    innerboxwidth: {
+        valType: 'number',
+        min: 0,
+        max: 1,
+        dflt: 0.25,
+        role: 'info',
+        editType: 'plot',
+        description: '...'
+    },
+    innerboxlinecolor: {
+        valType: 'color',
+        role: 'style',
+        editType: 'style',
+        description: ''
+    },
+    innerboxfillcolor: {
+        valType: 'color',
+        role: 'style',
+        editType: 'style',
+        description: ''
+    },
+    innerboxlinewidth: {
+        valType: 'number',
+        min: 0,
+        role: 'style',
+        editType: 'style',
+        description: ''
+    },
+
+    showmeanline: {
+        valType: 'boolean',
+        dflt: false,
+        role: 'info',
+        editType: 'plot',
+        description: 'Toggle'
+    },
+    meanlinecolor: {
+        valType: 'color',
+        role: 'style',
+        editType: 'style',
+        description: ''
+    },
+    meanlinewidth: {
+        valType: 'number',
+        min: 0,
+        role: 'style',
+        editType: 'style',
+        description: ''
+    },
     hoveron: boxAttrs.hoveron
 
     side: {

src/traces/violin/defaults.js

@@ -18,6 +18,9 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
+    function coerce2(attr, dflt) {
+        return Lib.coerce2(traceIn, traceOut, attributes, attr, dflt);
+    }
 
     boxDefaults.handleSampleDefaults(traceIn, traceOut, coerce, layout);
     if(traceOut.visible === false) return;
@@ -33,6 +36,31 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     if(Array.isArray(span)) spanmodeDflt = 'manual';
     coerce('spanmode', spanmodeDflt);
 
+    var lineColor = coerce('line.color', (traceIn.marker || {}).color || defaultColor);
+    var lineWidth = coerce('line.width');
+    var fillColor = coerce('fillcolor', Color.addOpacity(traceOut.line.color, 0.5));
 
     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;
+    }
 };

src/traces/violin/helpers.js

@@ -35,4 +35,31 @@ exports.makeKDE = function(calcItem, trace, vals) {
     };
 };
 
+exports.getPositionOnKdePath = function(calcItem, trace, valuePx) {
+    var posLetter, valLetter;
+
+    if(trace.orientation === 'h') {
+        posLetter = 'y';
+        valLetter = 'x';
+    } else {
+        posLetter = 'x';
+        valLetter = 'y';
+    }
+
+    var pointOnPath = Lib.findPointOnPath(
+        calcItem.path,
+        valuePx,
+        valLetter,
+        {pathLength: calcItem.pathLength}
+    );
+
+    var posCenterPx = calcItem.posCenterPx;
+    var posOnPath0 = pointOnPath[posLetter];
+    var posOnPath1 = trace.side === 'both' ?
+        2 * posCenterPx - posOnPath0 :
+        posCenterPx;
+
+    return [posOnPath0, posOnPath1];
+};
+
 exports.extractVal = function(o) { return o.v; };

src/traces/violin/plot.js

@@ -13,6 +13,7 @@ var Lib = require('../../lib');
 var Drawing = require('../../components/drawing');
 var boxPlot = require('../box/plot');
 var linePoints = require('../scatter/line_points');
+var helpers = require('./helpers');
 
 module.exports = function plot(gd, plotinfo, cd) {
     var fullLayout = gd._fullLayout;
@@ -128,10 +129,68 @@ module.exports = function plot(gd, plotinfo, cd) {
 
             });
 
-        if(trace.points) {
-            boxPlot.plotPoints(sel, plotinfo, trace, t);
+        if(trace.showinnerbox) {
+            var innerBoxWidth = trace.innerboxwidth;
+            var innerBoxLineWidth = trace.innerboxlinewidth;
+            var bdPosScaled;
+            var bPosPxOffset;
+
+            if(hasBothSides) {
+                bdPosScaled = bdPos * innerBoxWidth;
+                bPosPxOffset = 0;
+            } else if(hasPositiveSide) {
+                bdPosScaled = [0, bdPos * innerBoxWidth / 2];
+                bPosPxOffset = -innerBoxLineWidth;
+            } else {
+                bdPosScaled = [bdPos * innerBoxWidth / 2, 0];
+                bPosPxOffset = innerBoxLineWidth;
+            }
+
+            // do not draw whiskers on inner boxes
+            trace.whiskerwidth = 0;
+
+            boxPlot.plotBoxAndWhiskers(sel, {pos: posAxis, val: valAxis}, trace, {
+                bPos: bPos,
+                bdPos: bdPosScaled,
+                bPosPxOffset: bPosPxOffset
+            });
+
+            // if both showinnerbox and showmeanline are turned on, show mean
+            // line inside inner box
+
+            if(trace.showmeanline) {
+                boxPlot.plotBoxMean(sel, {pos: posAxis, val: valAxis}, trace, {
+                    bPos: bPos,
+                    bdPos: bdPosScaled,
+                    bPosPxOffset: bPosPxOffset
+                });
+            }
+        }
+        else {
+            if(trace.showmeanline) {
+                sel.selectAll('path.mean')
+                    .data(Lib.identity)
+                    .enter().append('path')
+                    .attr('class', 'mean')
+                    .style({
+                        fill: 'none',
+                        'vector-effect': 'non-scaling-stroke'
+                    })
+                    .each(function(d) {
+                        var v = valAxis.c2p(d.mean, true);
+                        var p = helpers.getPositionOnKdePath(d, trace, v);
+
+                        d3.select(this).attr('d',
+                            trace.orientation === 'h' ?
+                                'M' + v + ',' + p[0] + 'V' + p[1] :
+                                'M' + p[0] + ',' + v + 'H' + p[1]
+                        );
+                    });
+            }
         }
 
-        // TODO quartile line etc
+        if(trace.points) {
+            boxPlot.plotPoints(sel, {x: xa, y: ya}, trace, t);
+        }
     });
 };

src/traces/violin/style.js

@@ -21,11 +21,25 @@ module.exports = function style(gd) {
             var sel = d3.select(this);
 
             sel.selectAll('path.violin')
-                .style('stroke-width', '2px')
+                .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);
+
             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);
         });
 };