Add ability to sort numerically and alphabetically

ui/src/shared/components/Dygraph.js

@@ -19,10 +19,13 @@ export default class Dygraph extends Component {
         x: null,
         series: [],
       },
+      sortType: null,
+      legendOrder: 'asc',
     }
 
     this.getTimeSeries = ::this.getTimeSeries
     this.sync = ::this.sync
+    this.handleSortLegend = ::this.handleSortLegend
   }
 
   static defaultProps = {
@@ -38,6 +41,35 @@ export default class Dygraph extends Component {
     return timeSeries.length ? timeSeries : [[0]]
   }
 
+  handleSortLegend(sortType) {
+    const {legend, legendOrder} = this.state
+    const ascending = this.sortByType(legend.series, sortType)
+
+    if (legendOrder === 'asc') {
+      return this.setState({
+        legend: {...legend, series: ascending},
+        sortType,
+        legendOrder: 'desc',
+      })
+    }
+
+    this.setState({
+      legend: {...legend, series: ascending.reverse()},
+      sortType,
+      legendOrder: 'asc',
+    })
+  }
+
+  sortByType(list, sortType) {
+    return _.sortBy(list, ({y, label}) => {
+      if (sortType === 'numeric') {
+        return y
+      }
+
+      return label
+    })
+  }
+
   componentDidMount() {
     const timeSeries = this.getTimeSeries()
     // dygraphSeries is a legend label and its corresponding y-axis e.g. {legendLabel1: 'y', legendLabel2: 'y2'};
@@ -201,7 +233,7 @@ export default class Dygraph extends Component {
 
     return (
       <div className="dygraph-child">
-        <DygraphLegend {...legend} />
+        <DygraphLegend {...legend} onSort={this.handleSortLegend} />
         <div
           ref={r => {
             this.graphContainer = r

ui/src/shared/components/DygraphLegend.js

@@ -1,18 +1,24 @@
 import React, {PropTypes} from 'react'
 
-const DygraphLegend = ({series}) => (
+const DygraphLegend = ({series, onSort}) => (
   <div style={{userSelect: 'text'}} className="container--dygraph-legend">
     <div className="dygraph-legend--header">
       <input className="form-control input-xs" type="text" />
-      <button className="btn btn-primary btn-xs">
+      <button
+        className="btn btn-primary btn-xs"
+        onClick={() => onSort('alphabetic')}
+      >
         A-Z
       </button>
-      <button className="btn btn-primary btn-xs">
+      <button
+        className="btn btn-primary btn-xs"
+        onClick={() => onSort('numeric')}
+      >
         0-9
       </button>
     </div>
     <div className="dygraph-legend--contents">
-      {series.map(({label, color, yHTML}) => {
+      {series.map(({label, color, yHTML, isHighlighted}) => {
         return (
           <span key={label + color}>
             <b>
@@ -27,7 +33,7 @@ const DygraphLegend = ({series}) => (
   </div>
 )
 
-const {arrayOf, bool, number, shape, string} = PropTypes
+const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 DygraphLegend.propTypes = {
   x: number,
@@ -43,6 +49,7 @@ DygraphLegend.propTypes = {
     })
   ),
   dygraph: shape(),
+  onSort: func.isRequired,
 }
 
 export default DygraphLegend