Handle removing measurement from legend label

ui/src/shared/components/Dygraph.js

@@ -14,21 +14,23 @@ export default class Dygraph extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      isSynced: false,
-      isHidden: true,
       legend: {
         x: null,
         series: [],
       },
       sortType: '',
       filterText: '',
+      isSynced: false,
+      isHidden: true,
       isAscending: true,
+      isSnipped: false,
     }
 
     this.getTimeSeries = ::this.getTimeSeries
     this.sync = ::this.sync
     this.handleSortLegend = ::this.handleSortLegend
     this.handleLegendInputChange = ::this.handleLegendInputChange
+    this.handleSnipLabel = ::this.handleSnipLabel
   }
 
   static defaultProps = {
@@ -52,6 +54,10 @@ export default class Dygraph extends Component {
     this.setState({filterText: e.target.value})
   }
 
+  handleSnipLabel() {
+    this.setState({isSnipped: !this.state.isSnipped})
+  }
+
   componentDidMount() {
     const timeSeries = this.getTimeSeries()
     // dygraphSeries is a legend label and its corresponding y-axis e.g. {legendLabel1: 'y', legendLabel2: 'y2'};
@@ -270,19 +276,28 @@ export default class Dygraph extends Component {
   }
 
   render() {
-    const {legend, filterText, isAscending, sortType, isHidden} = this.state
+    const {
+      legend,
+      filterText,
+      isAscending,
+      sortType,
+      isHidden,
+      isSnipped,
+    } = this.state
 
     return (
       <div className="dygraph-child">
         <DygraphLegend
           {...legend}
-          onSort={this.handleSortLegend}
-          onInputChange={this.handleLegendInputChange}
+          sortType={sortType}
+          isHidden={isHidden}
+          isSnipped={isSnipped}
           filterText={filterText}
           isAscending={isAscending}
-          sortType={sortType}
+          onSnip={this.handleSnipLabel}
+          onSort={this.handleSortLegend}
           legendRef={el => this.legendRef = el}
-          isHidden={isHidden}
+          onInputChange={this.handleLegendInputChange}
         />
         <div
           ref={r => {

ui/src/shared/components/DygraphLegend.js

@@ -1,15 +1,22 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
+const removeMeasurement = (label = '') => {
+  const [measurement] = label.match(/^(.*)[.]/g) || ['']
+  return label.replace(measurement, '')
+}
+
 const DygraphLegend = ({
   series,
   onSort,
+  onSnip,
   isHidden,
+  isSnipped,
+  sortType,
   legendRef,
   filterText,
-  onInputChange,
   isAscending,
-  sortType,
+  onInputChange,
 }) => {
   const sorted = _.sortBy(
     series,
@@ -24,7 +31,6 @@ const DygraphLegend = ({
       style={{
         userSelect: 'text',
         transform: 'translate(-50%)',
-        overflowY: 'scroll',
       }}
       className={`container--dygraph-legend ${hidden}`}
       ref={legendRef}
@@ -48,6 +54,9 @@ const DygraphLegend = ({
         >
           0-9
         </button>
+        <button className="btn btn-primary btn-xs" onClick={onSnip}>
+          Snip Measurement
+        </button>
       </div>
       <div className="dygraph-legend--contents">
         {filtered.map(({label, color, yHTML, isHighlighted}) => {
@@ -57,7 +66,10 @@ const DygraphLegend = ({
                 <span
                   style={{color, fontWeight: isHighlighted ? 'bold' : 'normal'}}
                 >
-                  {label}: {yHTML || 'no value'}
+                  {isSnipped ? removeMeasurement(label) : label}
+                  :
+                  {' '}
+                  {yHTML || 'no value'}
                 </span>
               </b>
             </span>
@@ -91,6 +103,8 @@ DygraphLegend.propTypes = {
   sortType: string.isRequired,
   isHidden: bool.isRequired,
   legendRef: func.isRequired,
+  onSnip: func.isRequired,
+  isSnipped: bool.isRequired,
 }
 
 export default DygraphLegend