Changing Top N to support multiple series (#10834)

* Changing Top N to support multiple series * removing cruft
elastic · Mar 23, 2017 · d18ca55 · d18ca55
1 parent 1cd1dc9
commit d18ca55
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 5 deletions.
diff --git a/src/core_plugins/metrics/public/components/panel_config/top_n.js b/src/core_plugins/metrics/public/components/panel_config/top_n.js
@@ -1,6 +1,5 @@
 import React, { Component, PropTypes } from 'react';
 import SeriesEditor from '../series_editor';
-import _ from 'lodash';
 import IndexPattern from '../index_pattern';
 import createTextHandler from '../lib/create_text_handler';
 import ColorRules from '../color_rules';
@@ -21,9 +20,6 @@ class TopNPanelConfig extends Component {
     if (!model.bar_color_rules || (model.bar_color_rules && model.bar_color_rules.length === 0)) {
       parts.bar_color_rules = [{ id: uuid.v1() }];
     }
-    if (model.series && model.series.length > 0) {
-      parts.series = [_.assign({}, model.series[0])];
-    }
     this.props.onChange(parts);
   }
 
@@ -42,7 +38,6 @@ class TopNPanelConfig extends Component {
         <SeriesEditor
           colorPicker={false}
           fields={this.props.fields}
-          limit={1}
           model={this.props.model}
           name={this.props.name}
           onChange={this.props.onChange} />

diff --git a/src/core_plugins/metrics/public/components/vis_types/top_n/series.js b/src/core_plugins/metrics/public/components/vis_types/top_n/series.js
@@ -1,20 +1,33 @@
 import React, { PropTypes } from 'react';
+import ColorPicker from '../../color_picker';
+import AddDeleteButtons from '../../add_delete_buttons';
 import SeriesConfig from '../../series_config';
 import Sortable from 'react-anything-sortable';
 import Split from '../../split';
+import Tooltip from '../../tooltip';
+import createTextHandler from '../../lib/create_text_handler';
 import createAggRowRender from '../../lib/create_agg_row_render';
 
 function TopNSeries(props) {
   const {
     panel,
     model,
     fields,
+    onAdd,
+    onChange,
+    onDelete,
+    disableDelete,
+    disableAdd,
     selectedTab,
     visible
   } = props;
 
+  const handleChange = createTextHandler(onChange);
   const aggs = model.metrics.map(createAggRowRender(props));
 
+  let caretClassName = 'fa fa-caret-down';
+  if (!visible) caretClassName = 'fa fa-caret-right';
+
   let body = null;
   if (visible) {
     let metricsClassName = 'kbnTabs__tab';
@@ -69,12 +82,51 @@ function TopNSeries(props) {
     );
   }
 
+  const colorPicker = (
+    <ColorPicker
+      disableTrash={true}
+      onChange={props.onChange}
+      name="color"
+      value={model.color}/>
+  );
+
+  let dragHandle;
+  if (!props.disableDelete) {
+    dragHandle = (
+      <Tooltip text="Sort">
+        <div className="vis_editor__sort thor__button-outlined-default sm">
+          <i className="fa fa-sort"></i>
+        </div>
+      </Tooltip>
+    );
+  }
+
   return (
     <div
       className={`${props.className} vis_editor__series`}
       style={props.style}
       onMouseDown={props.onMouseDown}
       onTouchStart={props.onTouchStart}>
+      <div className="vis_editor__container">
+        <div className="vis_editor__series-details">
+          <div onClick={ props.toggleVisible }><i className={ caretClassName }/></div>
+          { colorPicker }
+          <div className="vis_editor__row vis_editor__row_item">
+            <input
+              className="vis_editor__input-grows"
+              onChange={handleChange('label')}
+              placeholder='Label'
+              value={model.label}/>
+          </div>
+          { dragHandle }
+          <AddDeleteButtons
+            onDelete={onDelete}
+            onClone={props.onClone}
+            onAdd={onAdd}
+            disableDelete={disableDelete}
+            disableAdd={disableAdd}/>
+        </div>
+      </div>
       { body }
     </div>
   );