Merge pull request #1333 from getredash/add-yaxis-scales

Add: control over y axis min/max values
getredash · Oct 9, 2016 · 2135dfd · 2135dfd
2 parents 39aaa2f + 08676a3
commit 2135dfd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/rd_ui/app/scripts/directives/plotly.js b/rd_ui/app/scripts/directives/plotly.js
@@ -141,6 +141,22 @@
     return value;
   }
 
+  function seriesMinValue(series) {
+    return _.min(_.map(series, function(s) { return _.min(series.y) }));
+  }
+
+  function seriesMaxValue(series) {
+    return _.max(_.map(series, function(s) { return _.max(series.y) }));
+  }
+
+  function leftAxisSeries(series) {
+    return _.filter(series, function(s) { return s.yaxis !== 'y2' });
+  }
+
+  function rightAxisSeries(series) {
+    return _.filter(series, function(s) { return s.yaxis === 'y2' });
+  }
+
   angular.module('plotly', [])
     .constant('ColorPalette', ColorPalette)
     .directive('plotlyChart', function () {
@@ -278,6 +294,7 @@
               return null;
             };
 
+
             scope.layout.xaxis = {title: getTitle(scope.options.xAxis),
                                   type: getScaleType(scope.options.xAxis.type)};
             if (angular.isDefined(scope.options.xAxis.labels)) {
@@ -286,12 +303,26 @@
             if (angular.isArray(scope.options.yAxis)) {
               scope.layout.yaxis = {title: getTitle(scope.options.yAxis[0]),
                                     type: getScaleType(scope.options.yAxis[0].type)};
+
+              if (angular.isNumber(scope.options.yAxis[0].rangeMin) || angular.isNumber(scope.options.yAxis[0].rangeMax)) {
+                var min = scope.options.yAxis[0].rangeMin || Math.min(0, seriesMinValue(leftAxisSeries(scope.data)));
+                var max = scope.options.yAxis[0].rangeMax || seriesMaxValue(leftAxisSeries(scope.data));
+
+                scope.layout.yaxis.range = [min, max];
+              }
             }
             if (hasY2 && angular.isDefined(scope.options.yAxis)) {
               scope.layout.yaxis2 = {title: getTitle(scope.options.yAxis[1]),
                                      type: getScaleType(scope.options.yAxis[1].type),
                                      overlaying: 'y',
                                      side: 'right'};
+
+              if (angular.isNumber(scope.options.yAxis[1].rangeMin) || angular.isNumber(scope.options.yAxis[1].rangeMax)) {
+                var min = scope.options.yAxis[1].rangeMin || Math.min(0, seriesMinValue(rightAxisSeries(scope.data)));
+                var max = scope.options.yAxis[1].rangeMax || seriesMaxValue(rightAxisSeries(scope.data));
+
+                scope.layout.yaxis2.range = [min, max];
+              }
             } else {
               delete scope.layout.yaxis2;
             }

diff --git a/rd_ui/app/views/visualizations/chart_editor.html b/rd_ui/app/views/visualizations/chart_editor.html
@@ -135,6 +135,14 @@ <h4>{{$index == 0 ? 'Left' : 'Right'}} Y Axis</h4>
         <label class="control-label">Name</label>
         <input ng-model="yAxis.title.text" type="text" class="form-control"></input>
       </div>
+      <div class="form-group">
+        <label class="control-label">Min Value</label>
+        <input ng-model="yAxis.rangeMin" type="number" step="any" placeholder="Auto" class="form-control"></input>
+      </div>
+      <div class="form-group">
+        <label class="control-label">Max Value</label>
+        <input ng-model="yAxis.rangeMax" type="number" step="any" placeholder="Auto" class="form-control"></input>
+      </div>
     </div>
   </div>