From d22861f3ecadfaab79eaf6397569abdbc39274b9 Mon Sep 17 00:00:00 2001
From: Chris Cowan <chris@chriscowan.us>
Date: Mon, 20 Mar 2017 09:17:58 -0700
Subject: [PATCH] UI Tweaks for Time Series Visual Builder (#10739)

* A few UI tweaks for Time Series series config

* fixing number inputs for color rules and fixing picker
---
 .../metrics/public/components/color_picker.js    |  2 +-
 .../metrics/public/components/color_rules.js     |  5 +++--
 .../public/components/lib/new_series_fn.js       |  2 +-
 .../components/vis_types/timeseries/config.js    | 16 +++++++++-------
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/core_plugins/metrics/public/components/color_picker.js b/src/core_plugins/metrics/public/components/color_picker.js
index 81b9ca854da60..9694b63a55f8d 100644
--- a/src/core_plugins/metrics/public/components/color_picker.js
+++ b/src/core_plugins/metrics/public/components/color_picker.js
@@ -87,7 +87,7 @@ class ColorPicker extends Component {
 
 ColorPicker.propTypes = {
   name: PropTypes.string.isRequired,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   disableTrash: PropTypes.bool,
   onChange: PropTypes.func
 };
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index 8ab4e0d058ef3..9bd7d4b505873 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -18,12 +18,13 @@ class ColorRules extends Component {
       const part = {};
       part[name] = cast(_.get(e, 'value', _.get(e, 'target.value')));
       if (part[name] === 'undefined') part[name] = undefined;
+      if (part[name] === NaN) part[name] = undefined;
       handleChange(_.assign({}, item, part));
     };
   }
 
   renderRow(row, i, items) {
-    const defaults = { value: '' };
+    const defaults = { value: 0 };
     const model = { ...defaults, ...row };
     const handleAdd = collectionActions.handleAdd.bind(null, this.props);
     const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
@@ -66,7 +67,7 @@ class ColorRules extends Component {
         </div>
         <input
           className="color_rules__input"
-          type="text"
+          type="number"
           value={model.value}
           onChange={this.handleChange(model, 'value', Number)}/>
         <div className="color_rules__control">
diff --git a/src/core_plugins/metrics/public/components/lib/new_series_fn.js b/src/core_plugins/metrics/public/components/lib/new_series_fn.js
index bd1ffa62af978..ef8292b6736ee 100644
--- a/src/core_plugins/metrics/public/components/lib/new_series_fn.js
+++ b/src/core_plugins/metrics/public/components/lib/new_series_fn.js
@@ -13,7 +13,7 @@ export default (obj = {}) => {
     chart_type: 'line',
     line_width: 1,
     point_size: 1,
-    fill: 0,
+    fill: 0.5,
     stacked: 'none'
   }, obj);
 };
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index 35b6a07df9c6a..60ccfdc933ec4 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -68,19 +68,20 @@ function TimeseriesConfig(props) {
         <div className="vis_editor__label">Fill (0 to 1)</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
+          step="0.1"
           onChange={handleTextChange('fill')}
           value={model.fill}/>
         <div className="vis_editor__label">Line Width</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
           onChange={handleTextChange('line_width')}
           value={model.line_width}/>
         <div className="vis_editor__label">Point Size</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
           onChange={handleTextChange('point_size')}
           value={model.point_size}/>
         <div className="vis_editor__label">Steps</div>
@@ -113,13 +114,14 @@ function TimeseriesConfig(props) {
         <div className="vis_editor__label">Fill (0 to 1)</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
+          step="0.5"
           onChange={handleTextChange('fill')}
           value={model.fill}/>
         <div className="vis_editor__label">Line Width</div>
         <input
           className="vis_editor__input-grows"
-          type="text"
+          type="number"
           onChange={handleTextChange('line_width')}
           value={model.line_width}/>
       </div>
@@ -172,14 +174,14 @@ function TimeseriesConfig(props) {
           <div className="vis_editor__label">Axis Min</div>
           <input
             className="vis_editor__input-grows"
-            type="text"
+            type="number"
             disabled={disableSeperateYaxis}
             onChange={handleTextChange('axis_min')}
             value={model.axis_min}/>
           <div className="vis_editor__label">Axis Max</div>
           <input
             className="vis_editor__input-grows"
-            type="text"
+            type="number"
             disabled={disableSeperateYaxis}
             onChange={handleTextChange('axis_max')}
             value={model.axis_max}/>