boxmode, barmode, violinmode, etc

dev/mocks.json

@@ -1,8 +1,11 @@
 [
   "/mocks/aggregate.json",
   "/percy/panelTest.json",
+  "/percy/bar.json",
+  "/percy/box.json",
   "/percy/histogram.json",
   "/percy/histogram2d.json",
+  "/percy/violin.json",
   "0.json",
   "1.json",
   "10.json",

dev/percy/bar.json

@@ -0,0 +1,45 @@
+{
+  "data": [
+    {
+      "type": "bar",
+      "mode": "markers",
+      "uid": "040729",
+      "x": [
+        1,
+        2,
+        3
+      ],
+      "xsrc": "x1",
+      "error_x": {
+        "visible": true,
+        "symmetric": true
+      },
+      "error_y": {
+        "visible": true,
+        "symmetric": false
+      }
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "type": "linear",
+      "range": [
+        0,
+        115.78947368421052
+      ],
+      "autorange": true
+    },
+    "yaxis": {
+      "range": [
+        -0.5,
+        5.815789473684211
+      ],
+      "autorange": true
+    },
+    "autosize": true,
+    "barmode": "group",
+    "barnorm": "percent",
+    "bargroupgap": 0.28
+  },
+  "frames": []
+}

dev/percy/box.json

@@ -0,0 +1,38 @@
+{
+  "data": [
+    {
+      "type": "box",
+      "mode": "markers",
+      "uid": "43d2ef",
+      "boxpoints": "all",
+      "x": [
+        1,
+        2,
+        3
+      ],
+      "xsrc": "x1",
+      "boxmean": true
+    }
+  ],
+  "layout": {
+    "xaxis": {
+      "type": "linear",
+      "range": [
+        0.7222222222222222,
+        6.277777777777778
+      ],
+      "autorange": true
+    },
+    "yaxis": {
+      "type": "category",
+      "range": [
+        -0.696,
+        0.5
+      ],
+      "autorange": true
+    },
+    "autosize": true,
+    "boxmode": "overlay"
+  },
+  "frames": []
+}

dev/percy/index.js

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

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

@@ -14,8 +14,11 @@ import './percy.css';
  * To specify which panels to test with the mock, add entry to panelsToTest, else all panels will be tested
  */
 const panelsToTest = {
-  histogram: ['GraphCreatePanel'],
+  bar: ['GraphCreatePanel', 'StyleTracesPanel'],
+  box: ['GraphCreatePanel', 'StyleTracesPanel'],
+  histogram: ['GraphCreatePanel', 'StyleTracesPanel'],
   histogram2d: ['GraphCreatePanel', 'StyleTracesPanel'],
+  violin: ['GraphCreatePanel', 'StyleTracesPanel'],
 };
 
 window.URL.createObjectURL = function() {

src/components/fields/FilterOperation.js

@@ -168,7 +168,7 @@ class UnconnectedFilterValue extends Component {
     const {fullValue, attr, defaultValue} = this.props;
     const op = findOperation(operation);
 
-    let label1 = _('Target');
+    let label1 = _('Reference');
     if (op === 'inrange' || op === 'exrange') {
       label1 = _('Lower Bound');
     } else if (op === 'inset' || op === 'exset') {

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 />
@@ -207,17 +220,54 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Border Color')} attr="marker.line.color" />
     </TraceMarkerSection>
     <LayoutSection name={_('Size and Spacing')}>
-      <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
+      <Radio
+        label={_('Box Mode')}
+        attr="boxmode"
+        options={[
+          {label: _('Overlay'), value: 'overlay'},
+          {label: _('Group'), value: 'group'},
+        ]}
+      />
       <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
-      <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
       <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
+      <Dropdown
+        label={_('Bar Mode')}
+        attr="barmode"
+        options={[
+          {label: _('Overlay'), value: 'overlay'},
+          {label: _('Group'), value: 'group'},
+          {label: _('Stack'), value: 'stack'},
+          {label: _('Relative'), value: 'relative'},
+        ]}
+        clearable={false}
+      />
+      <Dropdown
+        label={_('Normalization')}
+        attr="barnorm"
+        options={[
+          {label: _('None'), value: ''},
+          {label: _('Fraction'), value: 'fraction'},
+          {label: _('Percent'), value: 'percent'},
+        ]}
+        clearable={false}
+      />
+      <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
+      <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
+      <Radio
+        label={_('Violin Mode')}
+        attr="violinmode"
+        options={[
+          {label: _('Overlay'), value: 'overlay'},
+          {label: _('Group'), value: 'group'},
+        ]}
+      />
+      <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
+      <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
     </LayoutSection>
+    <NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
     <PlotlySection name={_('Ticks')}>
       <Numeric label={_('Width')} attr="tickwidth" />
     </PlotlySection>
-    <PlotlySection name={_('Whiskers')}>
-      <Numeric label={_('Width')} attr="whiskerwidth" />
-    </PlotlySection>
     <TraceTypeSection
       name={_('Lines')}
       traceTypes={[
@@ -395,23 +445,69 @@ const StyleTracesPanel = (props, {localize: _}) => (
         ]}
       />
     </PlotlySection>
-    <PlotlySection name={_('Highlight')}>
+    <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" />
+      <Radio
+        attr="side"
+        label={_('Visible Sides')}
+        options={[
+          {label: _('Both'), value: 'both'},
+          {label: _('Positive'), value: 'positive'},
+          {label: _('Negative'), value: 'negative'},
+        ]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Box Mean')}>
       <Radio
         attr="boxmean"
-        label={_('Mean')}
+        options={[
+          {label: _('Mean'), value: true},
+          {label: _('Mean & SD'), value: 'sd'},
+          {label: _('None'), value: false},
+        ]}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Box')}>
+      <Radio
+        attr="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" />
+    </PlotlySection>
+    <PlotlySection name={_('Meanline')}>
       <Radio
-        attr="boxmean"
-        label={_('Standard Deviation')}
+        attr="meanline.visible"
         options={[
-          {label: _('Show'), value: 'sd'},
+          {label: _('Show'), value: true},
           {label: _('Hide'), value: false},
         ]}
       />
+      <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
+      <ColorPicker label={_('Meanline Color')} attr="meanline.color" />
     </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',