Merge remote-tracking branch 'origin/feature/1602-graph-bounds-setting' into feature/1602-graph-bounds-setting

CHANGELOG.md

@@ -6,6 +6,7 @@
 ### Features
 1. [#1717](https://github.com/influxdata/chronograf/pull/1717): View server generated TICKscripts
 1. [#1681](https://github.com/influxdata/chronograf/pull/1681): Add the ability to select Custom Time Ranges in the Hostpages, Data Explorer, and Dashboards.
+1. [#1714](https://github.com/influxdata/chronograf/pull/1714): Add ability for users to set y-axis bounds
 
 
 ### UI Improvements

ui/spec/shared/parsing/getRangeForDygraphSpec.js

@@ -17,10 +17,10 @@ describe.only('getRangeForDygraphSpec', () => {
 
   it('does not get range when a range is provided', () => {
     const timeSeries = [[date, min], [date, max], [date, mid]]
-    const providedRange = [0, 4]
+    const providedRange = ['0', '4']
     const actual = getRange(timeSeries, providedRange)
 
-    expect(actual).to.deep.equal(providedRange)
+    expect(actual).to.deep.equal([0, 4])
   })
 
   it('gets the range for multiple timeSeries', () => {

ui/src/dashboards/components/Ranger.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
+// TODO: add logic for for Prefix, Suffix, Scale, and Multiplier
 const Ranger = ({onSetRange, axes}) => {
   const min = _.get(axes, ['y', 'bounds', '0'], '')
   const max = _.get(axes, ['y', 'bounds', '1'], '')
@@ -9,7 +10,7 @@ const Ranger = ({onSetRange, axes}) => {
     <div className="display-options--cell">
       <h5 className="display-options--header">Y Axis Controls</h5>
       <form autoComplete="off" style={{margin: '0 -6px'}}>
-        <div className="form-group col-sm-12">
+        {/*<div className="form-group col-sm-12">
           <label htmlFor="prefix">Axis Title</label>
           <input
             className="form-control input-sm"
@@ -17,7 +18,7 @@ const Ranger = ({onSetRange, axes}) => {
             name="label"
             id="label"
           />
-        </div>
+        </div>*/}
         <div className="form-group col-sm-6">
           <label htmlFor="min">Min</label>
           <input
@@ -42,7 +43,7 @@ const Ranger = ({onSetRange, axes}) => {
             placeholder="auto"
           />
         </div>
-        <div className="form-group col-sm-6">
+        {/*<div className="form-group col-sm-6">
           <label htmlFor="prefix">Labels Prefix</label>
           <input
             className="form-control input-sm"
@@ -73,7 +74,7 @@ const Ranger = ({onSetRange, axes}) => {
             <li className="active">Linear</li>
             <li>Logarithmic</li>
           </ul>
-        </div>
+        </div>*/}
 
       </form>
     </div>

ui/src/shared/parsing/getRangeForDygraph.js

@@ -18,9 +18,9 @@ const getRange = (
   ruleValues = {value: null, rangeValue: null}
 ) => {
   const {value, rangeValue, operator} = ruleValues
+  const [userMin, userMax] = userSelectedRange
 
-  if (userSelectedRange.length) {
-    const [userMin, userMax] = userSelectedRange
+  if (userMin && userMax) {
     return [considerZero(userMin), considerZero(userMax)]
   }
 
@@ -72,7 +72,7 @@ const getRange = (
 
   const [min, max] = range
 
-  return [min, max]
+  return [considerZero(userMin, min), considerZero(userMax, max)]
 }
 
 export default getRange