Clone SingleStat inside of Dygraph to get access to staticLegendHeight

This way the SingleStat doesn’t obscure the static legend if it is
present

ui/src/shared/components/Dygraph.js

@@ -301,8 +301,9 @@ class Dygraph extends Component {
 
   render() {
     const {isHidden, staticLegendHeight} = this.state
-    const {staticLegend} = this.props
+    const {staticLegend, children} = this.props
 
+    const nestedGraph = (children && children.length && children[0]) || children
     let dygraphStyle = {...this.props.containerStyle, zIndex: '2'}
     if (staticLegend) {
       const cellVerticalPadding = 16
@@ -344,12 +345,13 @@ class Dygraph extends Component {
               this.handleReceiveStaticLegendHeight
             }
           />}
+        {nestedGraph && React.cloneElement(nestedGraph, {staticLegendHeight})}
       </div>
     )
   }
 }
 
-const {array, arrayOf, bool, func, shape, string} = PropTypes
+const {array, arrayOf, bool, func, node, shape, string} = PropTypes
 
 Dygraph.defaultProps = {
   axes: {
@@ -408,6 +410,7 @@ Dygraph.propTypes = {
   dygraphRef: func,
   onZoom: func,
   mode: string,
+  children: node,
 }
 
 const mapStateToProps = ({annotations: {mode}}) => ({

ui/src/shared/components/LineGraph.js

@@ -118,7 +118,7 @@ class LineGraph extends Component {
           containerStyle={containerStyle}
           staticLegend={staticLegend}
           isGraphFilled={showSingleStat ? false : isGraphFilled}
-        />
+        >
           {showSingleStat
             ? <SingleStat
                 prefix={prefix}
@@ -129,6 +129,7 @@ class LineGraph extends Component {
                 cellHeight={cellHeight}
               />
             : null}
+        </Dygraph>
       </div>
     )
   }

ui/src/shared/components/SingleStat.js

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import lastValues from 'shared/parsing/lastValues'
 
 import {SMALL_CELL_HEIGHT} from 'shared/graphs/helpers'
+import {DYGRAPH_CONTAINER_V_MARGIN} from 'shared/constants'
 import {SINGLE_STAT_TEXT} from 'src/dashboards/constants/gaugeColors'
 import {generateSingleStatHexs} from 'shared/constants/colorOperations'
 
@@ -16,6 +17,7 @@ class SingleStat extends PureComponent {
       prefix,
       suffix,
       lineGraph,
+      staticLegendHeight,
     } = this.props
 
     // If data for this graph is being fetched for the first time, show a graph-wide spinner.
@@ -39,11 +41,24 @@ class SingleStat extends PureComponent {
       lastValue
     )
 
+    const backgroundColor = bgColor
+    const color = textColor
+    const height = `calc(100% - ${staticLegendHeight +
+      DYGRAPH_CONTAINER_V_MARGIN * 2}px)`
+
+    const singleStatStyles = staticLegendHeight
+      ? {
+          backgroundColor,
+          color,
+          height,
+        }
+      : {
+          backgroundColor,
+          color,
+        }
+
     return (
-      <div
-        className="single-stat"
-        style={{backgroundColor: bgColor, color: textColor}}
-      >
+      <div className="single-stat" style={singleStatStyles}>
         <span
           className={classnames('single-stat--value', {
             'single-stat--small': cellHeight === SMALL_CELL_HEIGHT,
@@ -77,6 +92,7 @@ SingleStat.propTypes = {
   prefix: string,
   suffix: string,
   lineGraph: bool,
+  staticLegendHeight: number,
 }
 
 export default SingleStat

ui/src/style/components/dygraphs.scss

@@ -93,7 +93,7 @@
     height: 100% !important;
   }
 }
-.dygraph > .single-stat {
+.dygraph-child > .single-stat {
   z-index: 3;
 }
 .single-stat--value {