Merge pull request #700 from alonho/fix/692

Fix: #692: Chart legend was cut off with a large number of series. The wrapping div now scrolls to make it visible.

rd_ui/app/scripts/directives/plotly.js

@@ -96,9 +96,9 @@
         restrict: 'E',
         template: '<plotly data="data" layout="layout" options="plotlyOptions"></plotly>',
         scope: {
-          options: "=options",
-          series: "=series",
-          height: "=height",
+          options: "=",
+          series: "=",
+          minHeight: "="
         },
         link: function (scope, element, attrs) {
           var getScaleType = function(scale) {
@@ -127,9 +127,13 @@
             return ColorPaletteArray[index % ColorPaletteArray.length];
           }
 
+          var bottomMargin = 50,
+              pixelsPerLegendRow = 21;
           var redraw = function() {
             scope.data.length = 0;
             scope.layout.showlegend = _.has(scope.options, 'legend') ? scope.options.legend.enabled : true;
+            scope.layout.height = Math.max(scope.minHeight, pixelsPerLegendRow * scope.series.length);
+            scope.layout.margin.b = scope.layout.height - (scope.minHeight - bottomMargin) ;
             delete scope.layout.barmode;
             delete scope.layout.xaxis;
             delete scope.layout.yaxis;
@@ -223,7 +227,7 @@
 
           scope.$watch('series', redraw);
           scope.$watch('options', redraw, true);
-          scope.layout = {margin: {l: 50, r: 50, b: 50, t: 20, pad: 4}, height: scope.height, autosize: true};
+          scope.layout = {margin: {l: 50, r: 50, b: 50, t: 20, pad: 4}, autosize: true};
           scope.plotlyOptions = {showLink: false, displaylogo: false};
           scope.data = [];
         }

rd_ui/app/views/visualizations/chart.html

@@ -1,3 +1,3 @@
-<div>
-  <plotly-chart options='plotlyOptions' series='chartSeries' height="300"></plotly-chart>
+<div style="max-height: 300px;">
+  <plotly-chart options='plotlyOptions' series='chartSeries' min-height="300"></plotly-chart>
 </div>