WIP Prepare for incoming legend key on cell

@goller is going to add a legend key to cell with a specific shape

ui/src/dashboards/components/AxesOptions.js

@@ -7,6 +7,7 @@ import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import {DISPLAY_OPTIONS, TOOLTIP_CONTENT} from 'src/dashboards/constants'
 import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
+import {STATIC_LEGEND_SHOW, STATIC_LEGEND_HIDE} from 'src/dashboards/constants'
 
 const {LINEAR, LOG, BASE_2, BASE_10} = DISPLAY_OPTIONS
 const getInputMin = scale => (scale === LOG ? '0' : null)
@@ -20,7 +21,7 @@ const AxesOptions = ({
   onSetYAxisBoundMin,
   onSetYAxisBoundMax,
   selectedGraphType,
-  showStaticLegend,
+  staticLegend,
   onToggleStaticLegend,
 }) => {
   const [min, max] = bounds
@@ -113,12 +114,12 @@ const AxesOptions = ({
           <Tabber labelText="Static Legend">
             <Tab
               text="Show"
-              isActive={showStaticLegend === true}
+              isActive={staticLegend.type === STATIC_LEGEND_SHOW}
               onClickTab={onToggleStaticLegend(true)}
             />
             <Tab
               text="Hide"
-              isActive={showStaticLegend === false}
+              isActive={staticLegend.type === STATIC_LEGEND_HIDE}
               onClickTab={onToggleStaticLegend(false)}
             />
           </Tabber>
@@ -128,7 +129,7 @@ const AxesOptions = ({
   )
 }
 
-const {arrayOf, bool, func, shape, string} = PropTypes
+const {arrayOf, func, shape, string} = PropTypes
 
 AxesOptions.defaultProps = {
   axes: {
@@ -159,7 +160,7 @@ AxesOptions.propTypes = {
     }),
   }).isRequired,
   onToggleStaticLegend: func.isRequired,
-  showStaticLegend: bool,
+  staticLegend: shape({}).isRequired,
 }
 
 export default AxesOptions

ui/src/dashboards/components/CellEditorOverlay.js

@@ -18,6 +18,8 @@ import {getQueryConfig} from 'shared/apis'
 import {
   removeUnselectedTemplateValues,
   TYPE_QUERY_CONFIG,
+  STATIC_LEGEND_SHOW,
+  STATIC_LEGEND_HIDE,
 } from 'src/dashboards/constants'
 import {OVERLAY_TECHNOLOGY} from 'shared/constants/classNames'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
@@ -33,11 +35,15 @@ import {
   validateColors,
 } from 'src/dashboards/constants/gaugeColors'
 
+const FAKE_LEGEND_OPTS = {
+  type: null,
+  orient: 'bottom',
+}
 class CellEditorOverlay extends Component {
   constructor(props) {
     super(props)
 
-    const {cell: {name, type, queries, axes, colors}, sources} = props
+    const {cell: {name, type, queries, axes, colors, legend}, sources} = props
 
     let source = _.get(queries, ['0', 'source'], null)
     source = sources.find(s => s.links.self === source) || props.source
@@ -60,7 +66,7 @@ class CellEditorOverlay extends Component {
       axes,
       colorSingleStatText: colorsTypeContainsText,
       colors: validateColors(colors, type, colorsTypeContainsText),
-      showStaticLegend: false,
+      staticLegend: legend || FAKE_LEGEND_OPTS,
     }
   }
 
@@ -372,7 +378,10 @@ class CellEditorOverlay extends Component {
   }
 
   handleToggleStaticLegend = newState => () => {
-    this.setState({showStaticLegend: newState})
+    const type = newState ? STATIC_LEGEND_SHOW : STATIC_LEGEND_HIDE
+    const staticLegend = {...this.state.staticLegend, type}
+
+    this.setState({staticLegend})
   }
 
   handleSetQuerySource = source => {
@@ -465,7 +474,7 @@ class CellEditorOverlay extends Component {
       isDisplayOptionsTabActive,
       queriesWorkingDraft,
       colorSingleStatText,
-      showStaticLegend,
+      staticLegend,
     } = this.state
 
     const queryActions = {
@@ -497,7 +506,7 @@ class CellEditorOverlay extends Component {
             queryConfigs={queriesWorkingDraft}
             editQueryStatus={editQueryStatus}
             onCellRename={this.handleCellRename}
-            showStaticLegend={showStaticLegend}
+            staticLegend={staticLegend}
           />
           <CEOBottom>
             <OverlayControls
@@ -526,7 +535,7 @@ class CellEditorOverlay extends Component {
                   onSetLabel={this.handleSetLabel}
                   onSetScale={this.handleSetScale}
                   onToggleStaticLegend={this.handleToggleStaticLegend}
-                  showStaticLegend={showStaticLegend}
+                  staticLegend={staticLegend}
                   queryConfigs={queriesWorkingDraft}
                   selectedGraphType={cellWorkingType}
                   onSetPrefixSuffix={this.handleSetPrefixSuffix}

ui/src/dashboards/components/DisplayOptions.js

@@ -51,7 +51,7 @@ class DisplayOptions extends Component {
       colorSingleStatText,
       onToggleSingleStatText,
       onSetSuffix,
-      showStaticLegend,
+      staticLegend,
       onToggleStaticLegend,
     } = this.props
     const {axes, axes: {y: {suffix}}} = this.state
@@ -95,7 +95,7 @@ class DisplayOptions extends Component {
             onSetYAxisBoundMin={onSetYAxisBoundMin}
             onSetYAxisBoundMax={onSetYAxisBoundMax}
             onToggleStaticLegend={onToggleStaticLegend}
-            showStaticLegend={showStaticLegend}
+            staticLegend={staticLegend}
           />
         )
     }
@@ -146,7 +146,7 @@ DisplayOptions.propTypes = {
   colorSingleStatText: bool.isRequired,
   onToggleSingleStatText: func.isRequired,
   onToggleStaticLegend: func.isRequired,
-  showStaticLegend: bool,
+  staticLegend: shape({}).isRequired,
 }
 
 export default DisplayOptions

ui/src/dashboards/components/Visualization.js

@@ -16,7 +16,7 @@ const DashVisualization = (
     queryConfigs,
     editQueryStatus,
     resizerTopHeight,
-    showStaticLegend,
+    staticLegend,
   },
   {source: {links: {proxy}}}
 ) =>
@@ -32,12 +32,12 @@ const DashVisualization = (
         autoRefresh={autoRefresh}
         editQueryStatus={editQueryStatus}
         resizerTopHeight={resizerTopHeight}
-        showStaticLegend={showStaticLegend}
+        staticLegend={staticLegend}
       />
     </div>
   </div>
 
-const {arrayOf, bool, func, number, shape, string} = PropTypes
+const {arrayOf, func, number, shape, string} = PropTypes
 
 DashVisualization.defaultProps = {
   name: '',
@@ -71,7 +71,7 @@ DashVisualization.propTypes = {
       value: string.isRequired,
     }).isRequired
   ),
-  showStaticLegend: bool,
+  staticLegend: shape({}).isRequired,
 }
 
 DashVisualization.contextTypes = {

ui/src/dashboards/constants/index.js

@@ -105,3 +105,6 @@ export const TYPE_QUERY_CONFIG = 'queryConfig'
 export const TYPE_SHIFTED = 'shifted queryConfig'
 export const TYPE_IFQL = 'ifql'
 export const DASHBOARD_NAME_MAX_LENGTH = 50
+
+export const STATIC_LEGEND_SHOW = 'static'
+export const STATIC_LEGEND_HIDE = null

ui/src/shared/components/Dygraph.js

@@ -14,6 +14,7 @@ import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
 import {buildDefaultYLabel} from 'shared/presenters'
 import {numberValueFormatter} from 'src/utils/formatting'
 
+import {STATIC_LEGEND_SHOW} from 'src/dashboards/constants'
 import {
   OPTIONS,
   LINE_COLORS,
@@ -302,10 +303,10 @@ export default class Dygraph extends Component {
 
   render() {
     const {isHidden, staticLegendHeight} = this.state
-    const {showStaticLegend} = this.props
+    const {staticLegend} = this.props
 
     let dygraphStyle = {...this.props.containerStyle, zIndex: '2'}
-    if (showStaticLegend) {
+    if (staticLegend.type === STATIC_LEGEND_SHOW) {
       const cellVerticalPadding = 16
 
       dygraphStyle = {
@@ -336,7 +337,7 @@ export default class Dygraph extends Component {
           className="dygraph-child-container"
           style={dygraphStyle}
         />
-        {showStaticLegend
+        {staticLegend.type === STATIC_LEGEND_SHOW
           ? <StaticLegend
               dygraph={this.dygraph}
               handleReceiveStaticLegendHeight={
@@ -371,6 +372,9 @@ Dygraph.defaultProps = {
   overrideLineColors: null,
   dygraphRef: () => {},
   onZoom: () => {},
+  staticLegend: {
+    type: null,
+  },
 }
 
 Dygraph.propTypes = {
@@ -389,7 +393,7 @@ Dygraph.propTypes = {
   containerStyle: shape({}),
   isGraphFilled: bool,
   isBarGraph: bool,
-  showStaticLegend: bool,
+  staticLegend: shape({}).isRequired,
   overrideLineColors: array,
   dygraphSeries: shape({}).isRequired,
   ruleValues: shape({

ui/src/shared/components/LineGraph.js

@@ -53,7 +53,7 @@ class LineGraph extends Component {
       isGraphFilled,
       showSingleStat,
       displayOptions,
-      showStaticLegend,
+      staticLegend,
       underlayCallback,
       overrideLineColors,
       isFetchingInitially,
@@ -112,7 +112,7 @@ class LineGraph extends Component {
           setResolution={setResolution}
           overrideLineColors={lineColors}
           containerStyle={containerStyle}
-          showStaticLegend={showStaticLegend}
+          staticLegend={staticLegend}
           isGraphFilled={showSingleStat ? false : isGraphFilled}
         />
         {showSingleStat
@@ -160,7 +160,7 @@ LineGraph.propTypes = {
   underlayCallback: func,
   isGraphFilled: bool,
   isBarGraph: bool,
-  showStaticLegend: bool,
+  staticLegend: shape({}).isRequired,
   overrideLineColors: array,
   showSingleStat: bool,
   displayOptions: shape({

ui/src/shared/components/RefreshingGraph.js

@@ -22,7 +22,7 @@ const RefreshingGraph = ({
   cellHeight,
   autoRefresh,
   resizerTopHeight,
-  showStaticLegend,
+  staticLegend,
   manualRefresh, // when changed, re-mounts the component
   synchronizer,
   resizeCoords,
@@ -86,7 +86,7 @@ const RefreshingGraph = ({
       isBarGraph={type === 'bar'}
       synchronizer={synchronizer}
       resizeCoords={resizeCoords}
-      showStaticLegend={showStaticLegend}
+      staticLegend={staticLegend}
       displayOptions={displayOptions}
       editQueryStatus={editQueryStatus}
       grabDataForDownload={grabDataForDownload}
@@ -95,7 +95,7 @@ const RefreshingGraph = ({
   )
 }
 
-const {arrayOf, func, number, shape, string, bool} = PropTypes
+const {arrayOf, func, number, shape, string} = PropTypes
 
 RefreshingGraph.propTypes = {
   timeRange: shape({
@@ -111,7 +111,7 @@ RefreshingGraph.propTypes = {
   axes: shape(),
   queries: arrayOf(shape()).isRequired,
   editQueryStatus: func,
-  showStaticLegend: bool,
+  staticLegend: shape({}).isRequired,
   onZoom: func,
   resizeCoords: shape(),
   grabDataForDownload: func,