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