Wire up OptIn into DisplayOptions

ui/src/dashboards/components/AxesOptions.js

@@ -1,8 +1,15 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
+import OptIn from 'shared/components/OptIn'
+
 // TODO: add logic for for Prefix, Suffix, Scale, and Multiplier
-const AxesOptions = ({onSetRange, onSetLabel, axes}) => {
+const AxesOptions = ({
+  onSetYAxisBoundMin,
+  onSetYAxisBoundMax,
+  onSetLabel,
+  axes,
+}) => {
   const min = _.get(axes, ['y', 'bounds', '0'], '')
   const max = _.get(axes, ['y', 'bounds', '1'], '')
   const label = _.get(axes, ['y', 'label'], '')
@@ -12,44 +19,29 @@ const AxesOptions = ({onSetRange, onSetLabel, axes}) => {
       <h5 className="display-options--header">Y Axis Controls</h5>
       <form autoComplete="off" style={{margin: '0 -6px'}}>
         <div className="form-group col-sm-12">
-          <label htmlFor="prefix">Title</label>
-          <input
-            className="form-control input-sm"
-            type="text"
-            name="label"
-            id="label"
+          <OptIn
+            rightLabel={'label'}
             value={label}
-            onChange={onSetLabel}
-            placeholder="auto"
+            onSetValue={onSetLabel}
+            type="text"
           />
         </div>
         <div className="form-group col-sm-6">
-          <label htmlFor="min">Min</label>
-          <input
-            className="form-control input-sm"
-            type="number"
-            name="min"
-            id="min"
+          <OptIn
+            rightLabel={'min'}
             value={min}
-            onChange={onSetRange}
-            placeholder="auto"
+            onSetValue={onSetYAxisBoundMin}
+            type="number"
           />
         </div>
         <div className="form-group col-sm-6">
-          <label htmlFor="max">Max</label>
-          <input
-            className="form-control input-sm"
-            type="number"
-            name="max"
-            id="max"
+          <OptIn
+            rightLabel={'max'}
             value={max}
-            onChange={onSetRange}
-            placeholder="auto"
+            onSetValue={onSetYAxisBoundMax}
+            type="number"
           />
         </div>
-        <p className="display-options--footnote">
-          Values left blank will be set automatically
-        </p>
         {/* <div className="form-group col-sm-6">
           <label htmlFor="prefix">Labels Prefix</label>
           <input
@@ -90,7 +82,8 @@ const AxesOptions = ({onSetRange, onSetLabel, axes}) => {
 const {arrayOf, func, shape, string} = PropTypes
 
 AxesOptions.propTypes = {
-  onSetRange: func.isRequired,
+  onSetYAxisBoundMin: func.isRequired,
+  onSetYAxisBoundMax: func.isRequired,
   onSetLabel: func.isRequired,
   axes: shape({
     y: shape({

ui/src/dashboards/components/CellEditorOverlay.js

@@ -32,7 +32,8 @@ class CellEditorOverlay extends Component {
     this.handleClickDisplayOptionsTab = ::this.handleClickDisplayOptionsTab
     this.handleSetActiveQueryIndex = ::this.handleSetActiveQueryIndex
     this.handleEditRawText = ::this.handleEditRawText
-    this.handleSetYAxisBounds = ::this.handleSetYAxisBounds
+    this.handleSetYAxisBoundMin = ::this.handleSetYAxisBoundMin
+    this.handleSetYAxisBoundMax = ::this.handleSetYAxisBoundMax
     this.handleSetLabel = ::this.handleSetLabel
 
     const {cell: {name, type, queries, axes}} = props
@@ -93,22 +94,28 @@ class CellEditorOverlay extends Component {
     }
   }
 
-  handleSetYAxisBounds(e) {
-    const {min, max} = e.target.form
+  handleSetYAxisBoundMin(min) {
     const {axes} = this.state
+    const {y: {bounds: [, max]}} = axes
 
     this.setState({
-      axes: {...axes, y: {...axes.y, bounds: [min.value, max.value]}},
+      axes: {...axes, y: {...axes.y, bounds: [min, max]}},
     })
-    e.preventDefault()
   }
 
-  handleSetLabel(e) {
-    const {label} = e.target.form
+  handleSetYAxisBoundMax(max) {
+    const {axes} = this.state
+    const {y: {bounds: [min]}} = axes
+
+    this.setState({
+      axes: {...axes, y: {...axes.y, bounds: [min, max]}},
+    })
+  }
+
+  handleSetLabel(value) {
     const {axes} = this.state
 
-    this.setState({axes: {...axes, y: {...axes.y, label: label.value}}})
-    e.preventDefault()
+    this.setState({axes: {...axes, y: {...axes.y, label: value}}})
   }
 
   handleAddQuery(options) {
@@ -245,7 +252,8 @@ class CellEditorOverlay extends Component {
               ? <DisplayOptions
                   selectedGraphType={cellWorkingType}
                   onSelectGraphType={this.handleSelectGraphType}
-                  onSetRange={this.handleSetYAxisBounds}
+                  onSetYAxisBoundMin={this.handleSetYAxisBoundMin}
+                  onSetYAxisBoundMax={this.handleSetYAxisBoundMax}
                   onSetLabel={this.handleSetLabel}
                   axes={axes}
                 />

ui/src/dashboards/components/DisplayOptions.js

@@ -7,7 +7,8 @@ const DisplayOptions = ({
   selectedGraphType,
   onSelectGraphType,
   onSetLabel,
-  onSetRange,
+  onSetYAxisBoundMin,
+  onSetYAxisBoundMax,
   axes,
 }) =>
   <div className="display-options">
@@ -15,7 +16,12 @@ const DisplayOptions = ({
       selectedGraphType={selectedGraphType}
       onSelectGraphType={onSelectGraphType}
     />
-    <AxesOptions onSetLabel={onSetLabel} onSetRange={onSetRange} axes={axes} />
+    <AxesOptions
+      onSetLabel={onSetLabel}
+      onSetYAxisBoundMin={onSetYAxisBoundMin}
+      onSetYAxisBoundMax={onSetYAxisBoundMax}
+      axes={axes}
+    />
   </div>
 
 const {func, shape, string} = PropTypes
@@ -23,7 +29,8 @@ const {func, shape, string} = PropTypes
 DisplayOptions.propTypes = {
   selectedGraphType: string.isRequired,
   onSelectGraphType: func.isRequired,
-  onSetRange: func.isRequired,
+  onSetYAxisBoundMin: func.isRequired,
+  onSetYAxisBoundMax: func.isRequired,
   onSetLabel: func.isRequired,
   axes: shape({}).isRequired,
 }

ui/src/shared/components/OptIn.js

@@ -114,12 +114,11 @@ class OptIn extends Component {
   setValue() {
     const {onSetValue} = this.props
     const {useRightValue, leftValue, rightValue} = this.state
-
     if (useRightValue) {
-      onSetValue({value: rightValue})
+      onSetValue(rightValue)
     } else {
       this.setState({rightValue: ''})
-      onSetValue({value: leftValue})
+      onSetValue(leftValue)
     }
 
     // reset UI interaction state-tracking values & prevent blur + click
@@ -129,7 +128,7 @@ class OptIn extends Component {
   }
 
   render() {
-    const {leftLabel, rightLabel} = this.props
+    const {leftLabel, rightLabel, type} = this.props
     const {useRightValue, rightValue} = this.state
 
     return (
@@ -150,9 +149,9 @@ class OptIn extends Component {
         </div>
         <input
           className="form-control input-sm"
-          type="number"
-          name="rightValueInput"
-          id="rightValueInput"
+          type={type}
+          name={rightLabel}
+          id={rightLabel}
           ref={el => (this.rightValueInput = el)}
           value={rightValue}
           onClick={() => {
@@ -176,7 +175,7 @@ OptIn.defaultProps = {
   rightLabel: 'Custom Value',
   value: '',
 }
-const {func, string} = PropTypes
+const {func, oneOf, string} = PropTypes
 
 OptIn.propTypes = {
   leftLabel: string,
@@ -184,6 +183,7 @@ OptIn.propTypes = {
   rightLabel: string,
   value: string,
   onSetValue: func.isRequired,
+  type: oneOf(['text', 'number']),
 }
 
 export default OptIn