diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js
index c183a311bd..e53d362ab4 100644
--- a/ui/src/dashboards/components/CellEditorOverlay.js
+++ b/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),
}
}
diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js
index 897ef34a40..fce4703321 100644
--- a/ui/src/shared/components/Dygraph.js
+++ b/ui/src/shared/components/Dygraph.js
@@ -339,14 +339,13 @@ class Dygraph extends Component {
className="dygraph-child-container"
style={dygraphStyle}
/>
- {staticLegend
- ?
- : null}
+ {staticLegend &&
+ }
)
}
diff --git a/ui/src/shared/components/DygraphLegend.js b/ui/src/shared/components/DygraphLegend.js
index 2e2c836fb6..7f0b91082c 100644
--- a/ui/src/shared/components/DygraphLegend.js
+++ b/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'
-
-const removeMeasurement = (label = '') => {
- const [measurement] = label.match(/^(.*)[.]/g) || ['']
- return label.replace(measurement, '')
-}
+import {makeLegendStyles, removeMeasurement} from 'shared/graphs/helpers'
class DygraphLegend extends Component {
state = {
diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js
index 4873a3188f..bb79fd0da1 100644
--- a/ui/src/shared/components/Layout.js
+++ b/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 = (
: {
- const [measurement] = label.match(/^(.*)[.]/g) || ['']
- return label.replace(measurement, '')
-}
+import {removeMeasurement} from 'shared/graphs/helpers'
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 = {
- visibilities: [],
- }
+ state = {
+ 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]
- ? _.map(visibilities, v => !v)
+ const prevClickStatus = clickStatus && visibilities[i]
+
+ 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 => {
- return dygraph.attributes_.series_[l].options.color
- })
+ ? _.map(labels, l => dygraph.attributes_.series_[l].options.color)
: []
const hoverEnabled = labels.length > 1
diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js
index 966d14d3a8..968c74aad0 100644
--- a/ui/src/shared/constants/index.js
+++ b/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'
diff --git a/ui/src/shared/graphs/helpers.js b/ui/src/shared/graphs/helpers.js
index 082f7e0493..85e5aa3b79 100644
--- a/ui/src/shared/graphs/helpers.js
+++ b/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,
diff --git a/ui/src/style/components/static-legend.scss b/ui/src/style/components/static-legend.scss
index 504ca28332..a9600a11a5 100644
--- a/ui/src/style/components/static-legend.scss
+++ b/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%;