Violin plot implementation

dev/mocks.json

@@ -3,6 +3,7 @@
   "/percy/panelTest.json",
   "/percy/histogram.json",
   "/percy/histogram2d.json",
+  "/percy/violin.json",
   "0.json",
   "1.json",
   "10.json",

dev/percy/index.js

@@ -1,5 +1,6 @@
 import panelTest from './panelTest.json';
 import histogram from './histogram.json';
 import histogram2d from './histogram2d.json';
+import violin from './violin.json';
 
-export {panelTest, histogram, histogram2d};
+export {panelTest, histogram, histogram2d, violin};

dev/percy/violin.json

@@ -0,0 +1,28 @@
+{
+  "data": [
+    {
+      "type": "violin",
+      "mode": "markers",
+      "uid": "91db56",
+      "box": {
+        "visible": true
+      },
+      "meanline": {
+        "visible": true
+      },
+      "bandwidth": 0,
+      "x": [
+        1,
+        2,
+        3
+      ],
+      "xsrc": "x1"
+    }
+  ],
+  "layout": {
+    "xaxis": {},
+    "yaxis": {},
+    "autosize": true
+  },
+  "frames": []
+}

src/__percy__/panels.percy.js

@@ -16,6 +16,7 @@ import './percy.css';
 const panelsToTest = {
   histogram: ['GraphCreatePanel'],
   histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
+  violin: ['GraphCreatePanel', 'StyleTracesPanel'],
 };
 
 window.URL.createObjectURL = function() {

src/default_panels/StyleTracesPanel.js

@@ -189,12 +189,25 @@ const StyleTracesPanel = (props, {localize: _}) => (
           {label: _('Unsorted'), value: false},
         ]}
       />
-      <Radio
+      <Dropdown
+        options={[
+          {label: _('Show All'), value: 'all'},
+          {label: _('Outliers'), value: 'outliers'},
+          {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
+          {label: _('Hide'), value: false},
+        ]}
         attr="boxpoints"
+        clearable={false}
+      />
+      <Dropdown
         options={[
-          {label: _('Show'), value: 'all'},
+          {label: _('Show All'), value: 'all'},
+          {label: _('Outliers'), value: 'outliers'},
+          {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
           {label: _('Hide'), value: false},
         ]}
+        attr="points"
+        clearable={false}
       />
       <NumericFraction label={_('Jitter')} attr="jitter" />
       <Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
@@ -395,6 +408,27 @@ const StyleTracesPanel = (props, {localize: _}) => (
         ]}
       />
     </PlotlySection>
+    <PlotlySection name={_('Scaling')}>
+      <Numeric label={_('Bandwidth')} attr="bandwidth" />
+      <Radio
+        label="Scale Mode"
+        attr="scalemode"
+        options={[
+          {label: _('Width'), value: 'width'},
+          {label: _('Count'), value: 'count'},
+        ]}
+      />
+      <Radio
+        label="Span Mode"
+        attr="spanmode"
+        options={[
+          {label: _('Soft'), value: 'soft'},
+          {label: _('Hard'), value: 'hard'},
+          {label: _('Manual'), value: 'manual'},
+        ]}
+      />
+      <Numeric label={_('Span')} attr="span" />
+    </PlotlySection>
     <PlotlySection name={_('Highlight')}>
       <Radio
         attr="boxmean"
@@ -412,6 +446,37 @@ const StyleTracesPanel = (props, {localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
+      <Radio
+        attr="box.visible"
+        label={_('Box Visible')}
+        options={[
+          {label: _('Show'), value: true},
+          {label: _('Hide'), value: false},
+        ]}
+      />
+      <NumericFraction label={_('Box Width')} attr="box.width" />
+      <ColorPicker label={_('Box Fill Color')} attr="box.color" />
+      <NumericFraction label={_('Box Line Width')} attr="box.line.width" />
+      <ColorPicker label={_('Box Line Color')} attr="box.line.color" />
+      <Radio
+        attr="meanline.visible"
+        label={_('Meanline Visible')}
+        options={[
+          {label: _('Show'), value: true},
+          {label: _('Hide'), value: false},
+        ]}
+      />
+      <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
+      <ColorPicker label={_('Meanline Color')} attr="meanline.color" />
+      <Radio
+        attr="side"
+        label={_('Density Function Side')}
+        options={[
+          {label: _('Both'), value: 'both'},
+          {label: _('Positive'), value: 'positive'},
+          {label: _('Negative'), value: 'negative'},
+        ]}
+      />
     </PlotlySection>
     <PlotlySection name={_('On Hover')}>
       <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />

src/lib/constants.js

@@ -58,6 +58,7 @@ export const TRACE_TO_AXIS = {
     'scatter',
     'scattergl',
     'box',
+    'violin',
     'bar',
     'heatmap',
     'heatmapgl',

src/lib/customTraceType.js

@@ -49,6 +49,13 @@ export function traceTypeToPlotlyInitFigure(traceType) {
         type: 'box',
         boxpoints: false,
       };
+    case 'violin':
+      return {
+        type: 'violin',
+        box: {visible: false},
+        meanline: {visible: false},
+        bandwidth: 0,
+      };
     case 'line3d':
       return {
         type: 'scatter3d',

src/lib/traceTypes.js

@@ -126,11 +126,11 @@ export const traceTypes = _ => [
     label: _('2D Contour Histogram'),
     category: chartCategory(_).DISTRIBUTIONS,
   },
-  // {
-  //   value: 'violin',
-  //   label: _('Violin'),
-  //   category: chartCategory(_).DISTRIBUTIONS,
-  // },
+  {
+    value: 'violin',
+    label: _('Violin'),
+    category: chartCategory(_).DISTRIBUTIONS,
+  },
   {
     value: 'choropleth',
     label: _('Choropleth'),