Merge pull request #1713 from deecay/plotly-box

Change: Box plot library from d3.js to Plotly.js

client/app/visualizations/box-plot/index.js

@@ -176,7 +176,7 @@ export default function (ngModule) {
 
     VisualizationProvider.registerVisualization({
       type: 'BOXPLOT',
-      name: 'Boxplot',
+      name: 'Boxplot (Deprecated)',
       renderTemplate,
       editorTemplate: editTemplate,
     });

client/app/visualizations/chart/chart-editor.html

@@ -103,6 +103,13 @@
       </label>
     </div>
 
+    <div class="checkbox" ng-if="options.globalSeriesType == 'box'">
+      <label>
+        <input type="checkbox" ng-model="options.showpoints">
+        <i class="input-helper"></i> Show All Points
+      </label>
+    </div>
+
     <div class="form-group" ng-if="options.globalSeriesType != 'custom'">
       <label class="control-label">Stacking</label>
 
@@ -116,6 +123,13 @@
         </ui-select>
       </div>
     </div>
+
+    <div class="form-group" ng-if="options.globalSeriesType == 'box'">
+      <label>
+        <label class="control-label">Graph Height</label>
+        <input name="graph-height" type="number" class="form-control" ng-model="options.height">
+      </label>
+    </div>
   </div>
 
   <div class="form-group" ng-if="options.globalSeriesType == 'custom'">

client/app/visualizations/chart/index.js

@@ -69,6 +69,7 @@ function ChartEditor(ColorPalette, clientConfig) {
         pie: { name: 'Pie', icon: 'pie-chart' },
         scatter: { name: 'Scatter', icon: 'circle-o' },
         bubble: { name: 'Bubble', icon: 'circle-o' },
+        box: { name: 'Box', icon: 'square-o' },
       };
 
       if (clientConfig.allowCustomJSVisualizations) {

client/app/visualizations/chart/plotly.js

@@ -4,10 +4,11 @@ import Plotly from 'plotly.js/lib/core';
 import bar from 'plotly.js/lib/bar';
 import pie from 'plotly.js/lib/pie';
 import histogram from 'plotly.js/lib/histogram';
+import box from 'plotly.js/lib/box';
 
 import moment from 'moment';
 
-Plotly.register([bar, pie, histogram]);
+Plotly.register([bar, pie, histogram, box]);
 Plotly.setPlotConfig({
   modeBarButtonsToRemove: ['sendDataToCloud'],
 });
@@ -197,6 +198,9 @@ const PlotlyChart = () => {
     link(scope, element) {
       function calculateHeight() {
         const height = Math.max(scope.height, (scope.height - 50) + bottomMargin);
+        if (scope.options.globalSeriesType === 'box') {
+          return scope.options.height || height;
+        }
         return height;
       }
 
@@ -213,6 +217,9 @@ const PlotlyChart = () => {
           series.mode = 'markers';
         } else if (type === 'bubble') {
           series.mode = 'markers';
+        } else if (type === 'box') {
+          series.type = 'box';
+          series.mode = 'markers';
         }
       }
 
@@ -273,6 +280,12 @@ const PlotlyChart = () => {
           return;
         }
 
+        if (scope.options.globalSeriesType === 'box') {
+          scope.options.sortX = false;
+          scope.layout.boxmode = 'group';
+          scope.layout.boxgroupgap = 0.50;
+        }
+
         let hasY2 = false;
         const sortX = scope.options.sortX === true || scope.options.sortX === undefined;
         const useUnifiedXaxis = sortX && scope.options.xAxis.type === 'category';
@@ -341,6 +354,22 @@ const PlotlyChart = () => {
               size: pluck(data, 'size'),
             };
           }
+
+          if (seriesOptions.type === 'box') {
+            plotlySeries.boxpoints = 'outliers';
+            plotlySeries.marker = {
+              size: 3,
+            };
+            if (scope.options.showpoints) {
+              plotlySeries.boxpoints = 'all';
+              plotlySeries.jitter = 0.3;
+              plotlySeries.pointpos = -1.8;
+              plotlySeries.marker = {
+                size: 3,
+              };
+            }
+          }
+
           scope.data.push(plotlySeries);
         });