Kumar: Make bottom margin on visualizations editable

getredash · May 3, 2016 · 1f8b9f2 · 1f8b9f2
1 parent 3a4050f
commit 1f8b9f2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>