From 303e158eb1484e9694d90ea27face9465a56d3cc Mon Sep 17 00:00:00 2001
From: Kumar Vora <vorakumar@gmail.com>
Date: Fri, 22 Apr 2016 13:16:00 -0500
Subject: [PATCH 1/2] Issue#1006: allowing user to change bottom margin for
 Chart visualizations

---
 rd_ui/app/scripts/directives/plotly.js           | 10 +++++++++-
 rd_ui/app/scripts/visualizations/chart.js        |  7 ++++++-
 rd_ui/app/views/visualizations/chart_editor.html |  5 +++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/rd_ui/app/scripts/directives/plotly.js b/rd_ui/app/scripts/directives/plotly.js
index c928a66d4..c3b4ff835 100644
--- a/rd_ui/app/scripts/directives/plotly.js
+++ b/rd_ui/app/scripts/directives/plotly.js
@@ -121,6 +121,8 @@
   angular.module('plotly', [])
     .constant('ColorPalette', ColorPalette)
     .directive('plotlyChart', function () {
+      var baseHeight = 250;
+      var bottomMargin = 50;
       return {
         restrict: 'E',
         template: '<div></div>',
@@ -161,6 +163,11 @@
           var recalculateOptions = function() {
             scope.data.length = 0;
             scope.layout.showlegend = _.has(scope.options, 'legend') ? scope.options.legend.enabled : true;
+            if(_.has(scope.options, 'bottomMargin')) {
+              bottomMargin = parseInt(scope.options.bottomMargin);
+              scope.layout.height = baseHeight + bottomMargin;
+              scope.layout.margin.b = bottomMargin;
+            }
             delete scope.layout.barmode;
             delete scope.layout.xaxis;
             delete scope.layout.yaxis;
@@ -281,7 +288,8 @@
           scope.$watch('series', recalculateOptions);
           scope.$watch('options', recalculateOptions, true);
 
-          scope.layout = {margin: {l: 50, r: 50, b: 50, t: 20, pad: 4}, height: scope.height, autosize: true, hovermode: 'closest'};
+
+          scope.layout = {margin: {l: 50, r: 50, b: bottomMargin, t: 20, pad: 4}, height: baseHeight+bottomMargin,  autosize: true, hovermode: 'closest'};
           scope.plotlyOptions = {showLink: false, displaylogo: false};
           scope.data = [];
 
diff --git a/rd_ui/app/scripts/visualizations/chart.js b/rd_ui/app/scripts/visualizations/chart.js
index b87b7bcf2..cc30e87a4 100644
--- a/rd_ui/app/scripts/visualizations/chart.js
+++ b/rd_ui/app/scripts/visualizations/chart.js
@@ -13,7 +13,8 @@
       xAxis: {type: 'datetime', labels: {enabled: true}},
       series: {stacking: null},
       seriesOptions: {},
-      columnMapping: {}
+      columnMapping: {},
+      bottomMargin: 50
     };
 
     VisualizationProvider.registerVisualization({
@@ -194,6 +195,10 @@
           scope.options.legend = {enabled: true};
         }
 
+        if (!_.has(scope.options, 'bottomMargin')) {
+          scope.options.bottomMargin = 50;
+        }
+
         if (scope.columnNames)
           _.each(scope.options.columnMapping, function(value, key) {
             if (scope.columnNames.length > 0 && !_.contains(scope.columnNames, key))
diff --git a/rd_ui/app/views/visualizations/chart_editor.html b/rd_ui/app/views/visualizations/chart_editor.html
index 3fa5f5e35..60ff2573c 100644
--- a/rd_ui/app/views/visualizations/chart_editor.html
+++ b/rd_ui/app/views/visualizations/chart_editor.html
@@ -79,6 +79,11 @@
         </ui-select>
       </div>
     </div>
+
+    <div class="form-group">
+      <label class="control-label">Bottom Margin</label>
+      <input name="name" type="text" class="form-control" ng-model="options.bottomMargin">
+    </div>
   </div>
 
 

From d2ba0cb6cf1fa5b291bd858f9a105999e7b6ed3c Mon Sep 17 00:00:00 2001
From: Kumar Vora <vorakumar@gmail.com>
Date: Mon, 9 May 2016 16:11:51 -0500
Subject: [PATCH 2/2] Let plotly calculate the height based on provided margin
 values

---
 rd_ui/app/scripts/directives/plotly.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/rd_ui/app/scripts/directives/plotly.js b/rd_ui/app/scripts/directives/plotly.js
index c3b4ff835..38cd7329e 100644
--- a/rd_ui/app/scripts/directives/plotly.js
+++ b/rd_ui/app/scripts/directives/plotly.js
@@ -121,7 +121,6 @@
   angular.module('plotly', [])
     .constant('ColorPalette', ColorPalette)
     .directive('plotlyChart', function () {
-      var baseHeight = 250;
       var bottomMargin = 50;
       return {
         restrict: 'E',
@@ -165,7 +164,6 @@
             scope.layout.showlegend = _.has(scope.options, 'legend') ? scope.options.legend.enabled : true;
             if(_.has(scope.options, 'bottomMargin')) {
               bottomMargin = parseInt(scope.options.bottomMargin);
-              scope.layout.height = baseHeight + bottomMargin;
               scope.layout.margin.b = bottomMargin;
             }
             delete scope.layout.barmode;
@@ -289,7 +287,7 @@
           scope.$watch('options', recalculateOptions, true);
 
 
-          scope.layout = {margin: {l: 50, r: 50, b: bottomMargin, t: 20, pad: 4}, height: baseHeight+bottomMargin,  autosize: true, hovermode: 'closest'};
+          scope.layout = {margin: {l: 50, r: 50, b: bottomMargin, t: 20, pad: 4}, autosize: true, hovermode: 'closest'};
           scope.plotlyOptions = {showLink: false, displaylogo: false};
           scope.data = [];