Merge pull request #882 from influxdata/kapacitor-padding

Fix y-axis graph padding

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## v1.2.0 [unreleased]
 
 ### Bug Fixes
+  1. [#882](https://github.com/influxdata/chronograf/pull/882): Fix y-axis graph padding
 
 ### Features
   1. [#873](https://github.com/influxdata/chronograf/pull/873): Add [TLS](https://github.com/influxdata/chronograf/blob/master/docs/tls.md) support 

ui/spec/shared/parsing/getRangeForDygraphSpec.js

@@ -40,4 +40,48 @@ describe('getRangeForDygraphSpec', () => {
 
     expect(actual).to.deep.equal(expected);
   });
+
+  describe('when user provides a rule value', () => {
+    const defaultMax = 20;
+    const defaultMin = -10;
+    const timeSeries = [[new Date(1000), defaultMax], [new Date(2000), 1], [new Date(3000), defaultMin]];
+
+    it('can pad positive values', () => {
+      const value = 20;
+      const [min, max] = getRange(timeSeries, undefined, value);
+
+      expect(min).to.equal(defaultMin);
+      expect(max).to.be.above(defaultMax);
+    });
+
+    it('can pad negative values', () => {
+      const value = -10;
+      const [min, max] = getRange(timeSeries, undefined, value);
+
+      expect(min).to.be.below(defaultMin);
+      expect(max).to.equal(defaultMax);
+    });
+  });
+
+  describe('when user provides a rule range value', () => {
+    const defaultMax = 20;
+    const defaultMin = -10;
+    const timeSeries = [[new Date(1000), defaultMax], [new Date(2000), 1], [new Date(3000), defaultMin]];
+
+    it('can pad positive values', () => {
+      const rangeValue = 20;
+      const [min, max] = getRange(timeSeries, undefined, 0, rangeValue);
+
+      expect(min).to.equal(defaultMin);
+      expect(max).to.be.above(defaultMax);
+    });
+
+    it('can pad negative values', () => {
+      const rangeValue = -10;
+      const [min, max] = getRange(timeSeries, undefined, 0, rangeValue);
+
+      expect(min).to.be.below(defaultMin);
+      expect(max).to.equal(defaultMax);
+    });
+  });
 });

ui/src/shared/parsing/getRangeForDygraph.js

@@ -5,25 +5,21 @@ export default function getRange(timeSeries, override, value = null, rangeValue
     return override;
   }
 
-  const subtractPadding = (val) => +val - val * PADDING_FACTOR;
-  const addPadding = (val) => +val + val * PADDING_FACTOR;
+  const subtractPadding = (val) => +val - Math.abs(val * PADDING_FACTOR);
+  const addPadding = (val) => +val + Math.abs(val * PADDING_FACTOR);
 
-  const pad = (val, side) => {
+  const pad = (val) => {
     if (val === null || val === '') {
       return null;
     }
 
-    if (val < 0) {
-      return side === "top" ? subtractPadding(val) : addPadding(val);
-    }
-
-    return side === "top" ? addPadding(val) : subtractPadding(val);
+    return val < 0 ? subtractPadding(val) : addPadding(val);
   };
 
   const points = [
     ...timeSeries,
     [null, pad(value)],
-    [null, pad(rangeValue, "top")],
+    [null, pad(rangeValue)],
   ];
 
   const range = points.reduce(([min, max] = [], series) => {