WIP add range to dashboard cell

ui/src/dashboards/components/CellEditorOverlay.js

@@ -34,6 +34,7 @@ class CellEditorOverlay extends Component {
     this.handleSetActiveQueryIndex = ::this.handleSetActiveQueryIndex
     this.handleEditRawText = ::this.handleEditRawText
     this.handleSetRange = ::this.handleSetRange
+    this.normalizeAxes = ::this.normalizeAxes
 
     const {cell: {name, type, queries, axes}} = props
 
@@ -81,6 +82,7 @@ class CellEditorOverlay extends Component {
   handleSetRange(e) {
     const {min, max} = e.target.form
 
+    // TODO: handle "" for min and max value
     this.setState({
       axes: {
         y: {
@@ -109,10 +111,10 @@ class CellEditorOverlay extends Component {
       queriesWorkingDraft,
       cellWorkingType: type,
       cellWorkingName: name,
-      axes,
     } = this.state
 
     const {cell} = this.props
+    const axes = this.normalizeAxes()
 
     const queries = queriesWorkingDraft.map(q => {
       const timeRange = q.range || {upper: null, lower: ':dashboardTime:'}
@@ -135,6 +137,22 @@ class CellEditorOverlay extends Component {
     })
   }
 
+  normalizeAxes() {
+    const axes = this.state.axes
+    const bounds = _.get(axes, ['y', 'bounds'], false)
+    if (!bounds && !bounds.length) {
+      return {...axes, y: {bounds: []}}
+    }
+
+    const [min, max] = bounds
+    if (min === '' || max === '') {
+      // TODO: throw requirement error
+      return
+    }
+
+    return {...axes, y: {bounds: [+min, +max]}}
+  }
+
   handleSelectGraphType(graphType) {
     this.setState({cellWorkingType: graphType})
   }

ui/src/dashboards/components/Ranger.js

@@ -1,7 +1,11 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
-const Ranger = ({onSetRange, axes}) =>
+const Ranger = ({onSetRange, axes}) => {
+  const min = _.get(axes, ['y', 'bounds', '0'], '')
+  const max = _.get(axes, ['y', 'bounds', '1'], '')
+
+  return (
     <div className="display-options--cell">
       <h5 className="display-options--header">Y Axis Controls</h5>
       <form autoComplete="off">
@@ -14,27 +18,29 @@ const Ranger = ({onSetRange, axes}) =>
             type="number"
             name="min"
             id="min"
-          value={_.get(axes, ['y', 'bounds', '0'], '')}
+            value={min}
             onChange={onSetRange}
             placeholder="auto"
           />
         </div>
         <div className="display-options--row">
           <label htmlFor="max" style={{width: '40px'}}>
-          Max
+            Maximum
           </label>
           <input
             className="form-control input-sm"
             type="number"
             name="max"
             id="max"
-          value={_.get(axes, ['y', 'bounds', '1'], '')}
+            value={max}
             onChange={onSetRange}
             placeholder="auto"
           />
         </div>
       </form>
     </div>
+  )
+}
 
 const {array, func, shape} = PropTypes
 

ui/src/shared/components/LayoutRenderer.js

@@ -151,7 +151,7 @@ class LayoutRenderer extends Component {
     } = this.props
 
     return cells.map(cell => {
-      const {type, h, yRanges} = cell
+      const {type, h, axes} = cell
 
       return (
         <div key={cell.i}>
@@ -175,7 +175,7 @@ class LayoutRenderer extends Component {
                   type={type}
                   queries={this.standardizeQueries(cell, source)}
                   cellHeight={h}
-                  yRanges={yRanges}
+                  axes={axes}
                 />}
           </NameableGraph>
         </div>