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%;