Implement PR review suggestions.

ui/src/dashboards/components/CellEditorOverlay.js

@@ -14,7 +14,7 @@ import * as queryModifiers from 'src/utils/queryTransitions'
 import defaultQueryConfig from 'src/utils/defaultQueryConfig'
 import {buildQuery} from 'utils/influxql'
 import {getQueryConfig} from 'shared/apis'
-import {GET_STATIC_LEGEND} from 'src/shared/constants'
+import {IS_STATIC_LEGEND} from 'src/shared/constants'
 
 import {
   removeUnselectedTemplateValues,
@@ -46,7 +46,7 @@ class CellEditorOverlay extends Component {
       queriesWorkingDraft,
       activeQueryIndex: 0,
       isDisplayOptionsTabActive: false,
-      staticLegend: GET_STATIC_LEGEND(legend),
+      staticLegend: IS_STATIC_LEGEND(legend),
     }
   }
 

ui/src/shared/components/Dygraph.js

@@ -339,14 +339,13 @@ class Dygraph extends Component {
           className="dygraph-child-container"
           style={dygraphStyle}
         />
-        {staticLegend
+        {staticLegend &&
-          ? <StaticLegend
+          <StaticLegend
-              dygraph={this.dygraph}
+            dygraph={this.dygraph}
-              handleReceiveStaticLegendHeight={
+            handleReceiveStaticLegendHeight={
-                this.handleReceiveStaticLegendHeight
+              this.handleReceiveStaticLegendHeight
-              }
+            }
-            />
+          />}
-          : null}
       </div>
     )
   }

ui/src/shared/components/DygraphLegend.js

@@ -3,12 +3,7 @@ import _ from 'lodash'
 import classnames from 'classnames'
 import uuid from 'node-uuid'
 
-import {makeLegendStyles} from 'shared/graphs/helpers'
+import {makeLegendStyles, removeMeasurement} from 'shared/graphs/helpers'
-
-const removeMeasurement = (label = '') => {
-  const [measurement] = label.match(/^(.*)[.]/g) || ['']
-  return label.replace(measurement, '')
-}
 
 class DygraphLegend extends Component {
   state = {

ui/src/shared/components/Layout.js

@@ -3,7 +3,7 @@ import WidgetCell from 'shared/components/WidgetCell'
 import LayoutCell from 'shared/components/LayoutCell'
 import RefreshingGraph from 'shared/components/RefreshingGraph'
 import {buildQueriesForLayouts} from 'utils/buildQueriesForLayouts'
-import {GET_STATIC_LEGEND} from 'src/shared/constants'
+import {IS_STATIC_LEGEND} from 'src/shared/constants'
 
 import _ from 'lodash'
 
@@ -75,7 +75,7 @@ const Layout = (
       : <RefreshingGraph
           axes={axes}
           type={type}
-          staticLegend={GET_STATIC_LEGEND(legend)}
+          staticLegend={IS_STATIC_LEGEND(legend)}
           cellHeight={h}
           colors={colors}
           onZoom={onZoom}

ui/src/shared/components/StaticLegend.js

@@ -1,19 +1,7 @@
 import React, {PropTypes, Component} from 'react'
 import _ from 'lodash'
 import uuid from 'node-uuid'
-
+import {removeMeasurement} from 'shared/graphs/helpers'
-const style = {
-  position: 'absolute',
-  width: 'calc(100% - 32px)',
-  bottom: '8px',
-  left: '16px',
-  paddingTop: '8px',
-}
-
-const removeMeasurement = (label = '') => {
-  const [measurement] = label.match(/^(.*)[.]/g) || ['']
-  return label.replace(measurement, '')
-}
 
 const staticLegendItemClassname = (visibilities, i, hoverEnabled) => {
   if (visibilities.length) {
@@ -29,10 +17,11 @@ const staticLegendItemClassname = (visibilities, i, hoverEnabled) => {
 class StaticLegend extends Component {
   constructor(props) {
     super(props)
+  }
 
-    this.state = {
+  state = {
-      visibilities: [],
+    visibilities: [],
-    }
+    clickStatus: false,
   }
 
   componentDidMount = () => {
@@ -51,6 +40,7 @@ class StaticLegend extends Component {
 
   handleClick = i => e => {
     const visibilities = this.props.dygraph.visibility()
+    const clickStatus = this.state.clickStatus
 
     if (e.shiftKey || e.metaKey) {
       visibilities[i] = !visibilities[i]
@@ -59,13 +49,19 @@ class StaticLegend extends Component {
       return
     }
 
-    const newVisibilities = visibilities[i]
+    const prevClickStatus = clickStatus && visibilities[i]
-      ? _.map(visibilities, v => !v)
+
+    const newVisibilities = prevClickStatus
+      ? _.map(visibilities, () => true)
       : _.map(visibilities, () => false)
+
     newVisibilities[i] = true
 
     this.props.dygraph.setVisibility(newVisibilities)
-    this.setState({visibilities: newVisibilities})
+    this.setState({
+      visibilities: newVisibilities,
+      clickStatus: !prevClickStatus,
+    })
   }
 
   render() {
@@ -74,9 +70,7 @@ class StaticLegend extends Component {
 
     const labels = dygraph ? _.drop(dygraph.getLabels()) : []
     const colors = dygraph
-      ? _.map(labels, l => {
+      ? _.map(labels, l => dygraph.attributes_.series_[l].options.color)
-          return dygraph.attributes_.series_[l].options.color
-        })
       : []
 
     const hoverEnabled = labels.length > 1

ui/src/shared/constants/index.js

@@ -426,7 +426,7 @@ export const DEFAULT_SOURCE = {
   metaUrl: '',
 }
 
-export const GET_STATIC_LEGEND = legend =>
+export const IS_STATIC_LEGEND = legend =>
   _.get(legend, 'type', false) === 'static'
 
 export const linksLink = '/chronograf/v1'

ui/src/shared/graphs/helpers.js

@@ -173,6 +173,12 @@ export const makeLegendStyles = (graph, legend, pageX) => {
   }
 }
 
+// globally matches anything that ends in a '.'
+export const removeMeasurement = (label = '') => {
+  const [measurement] = label.match(/^(.*)[.]/g) || ['']
+  return label.replace(measurement, '')
+}
+
 export const OPTIONS = {
   rightGap: 0,
   axisLineWidth: 2,

ui/src/style/components/static-legend.scss

@@ -6,7 +6,12 @@
 */
 
 .static-legend {
+  position: absolute;
+  width: calc(100% - 32px);
+  bottom: 8px;
+  left: 16px;
   display: flex;
+  padding-top: 8px;
   align-items: flex-end;
   flex-wrap: wrap;
   max-height: 50%;