Merge pull request #1007 from vorakumar/issue-1006

Issue#1006:  Make bottom margin editable for Chart visualization

rd_ui/app/scripts/directives/plotly.js

@@ -121,6 +121,7 @@
   angular.module('plotly', [])
     .constant('ColorPalette', ColorPalette)
     .directive('plotlyChart', function () {
+      var bottomMargin = 50;
       return {
         restrict: 'E',
         template: '<div></div>',
@@ -161,6 +162,10 @@
           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.margin.b = bottomMargin;
+            }
             delete scope.layout.barmode;
             delete scope.layout.xaxis;
             delete scope.layout.yaxis;
@@ -281,7 +286,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}, autosize: true, hovermode: 'closest'};
           scope.plotlyOptions = {showLink: false, displaylogo: false};
           scope.data = [];
 

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))

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>