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
elastic · Mar 20, 2017 · d22861f · d22861f
1 parent 5e7b471
commit d22861f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}/>