Modifying the histograms interval to support decimals

src/ui/public/agg_types/__tests__/buckets/_histogram.js

@@ -35,12 +35,22 @@ describe('Histogram Agg', function () {
     describe('interval', function () {
       // reads aggConfig.params.interval, writes to dsl.interval
 
-      it('accepts a number', function () {
+      it('accepts a whole number', function () {
         let output = paramWriter.write({ interval: 100 });
         expect(output.params).to.have.property('interval', 100);
       });
 
-      it('accepts a string', function () {
+      it('accepts a decimal number', function () {
+        let output = paramWriter.write({ interval: 0.1 });
+        expect(output.params).to.have.property('interval', 0.1);
+      });
+
+      it('accepts a decimal number string', function () {
+        let output = paramWriter.write({ interval: '0.1' });
+        expect(output.params).to.have.property('interval', 0.1);
+      });
+
+      it('accepts a whole number string', function () {
         let output = paramWriter.write({ interval: '10' });
         expect(output.params).to.have.property('interval', 10);
       });

src/ui/public/agg_types/buckets/histogram.js

@@ -29,7 +29,7 @@ export default function HistogramAggDefinition(Private) {
         name: 'interval',
         editor: intervalTemplate,
         write: function (aggConfig, output) {
-          output.params.interval = parseInt(aggConfig.params.interval, 10);
+          output.params.interval = parseFloat(aggConfig.params.interval);
         }
       },
 

src/ui/public/agg_types/controls/interval.html

@@ -35,6 +35,6 @@
     class="form-control"
     name="interval"
     min="0"
-    input-whole-number
+    input-number
     >
 </div>

src/ui/public/directives/__tests__/input_number.js

@@ -0,0 +1,49 @@
+import angular from 'angular';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import 'ui/directives/input_whole_number';
+
+describe('Number input directive', function () {
+  let $compile;
+  let $rootScope;
+  let html = '<input type="text" ng-model="value" input-number />';
+
+  beforeEach(ngMock.module('kibana'));
+
+  beforeEach(ngMock.inject(function (_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+
+  it('should allow whole numbers', function () {
+    let element = $compile(html)($rootScope);
+
+    $rootScope.value = '123';
+    $rootScope.$digest();
+    expect(element.hasClass('ng-valid')).to.be.ok();
+
+    $rootScope.value = '1';
+    $rootScope.$digest();
+    expect(element.hasClass('ng-valid')).to.be.ok();
+
+    $rootScope.value = '-5';
+    $rootScope.$digest();
+    expect(element.hasClass('ng-valid')).to.be.ok();
+  });
+
+  it('should allow numbers with decimals', function () {
+    let element = $compile(html)($rootScope);
+
+    $rootScope.value = '123.0';
+    $rootScope.$digest();
+    expect(element.hasClass('ng-valid')).to.be.ok();
+
+    $rootScope.value = '1.2';
+    $rootScope.$digest();
+    expect(element.hasClass('ng-valid')).to.be.ok();
+
+    $rootScope.value = '-5.5';
+    $rootScope.$digest();
+    expect(element.hasClass('ng-valid')).to.be.ok();
+  });
+});

src/ui/public/directives/input_number.js

@@ -0,0 +1,18 @@
+import uiModules from 'ui/modules';
+let module = uiModules.get('kibana');
+
+module.directive('inputNumber', function () {
+  return {
+    restrict: 'A',
+    require: 'ngModel',
+    link: function ($scope, $elem, attrs, ngModel) {
+      ngModel.$parsers.push(checkNumber);
+      ngModel.$formatters.push(checkNumber);
+
+      function checkNumber(value) {
+        ngModel.$setValidity('number', !isNaN(parseFloat(value)));
+        return value;
+      }
+    }
+  };
+});