From 58d3d24313a70b0b887f8a0ca17276f765b07209 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 11 May 2018 15:15:07 -0700
Subject: [PATCH 1/2] Convert component to TypeScript

---
 ui/src/shared/components/SingleStat.js  |  98 -------------------
 ui/src/shared/components/SingleStat.tsx | 125 ++++++++++++++++++++++++
 ui/src/shared/parsing/lastValues.ts     |   3 +-
 3 files changed, 127 insertions(+), 99 deletions(-)
 delete mode 100644 ui/src/shared/components/SingleStat.js
 create mode 100644 ui/src/shared/components/SingleStat.tsx

diff --git a/ui/src/shared/components/SingleStat.js b/ui/src/shared/components/SingleStat.js
deleted file mode 100644
index 4a396dd345..0000000000
--- a/ui/src/shared/components/SingleStat.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import getLastValues from 'shared/parsing/lastValues'
-import _ from 'lodash'
-
-import {SMALL_CELL_HEIGHT} from 'shared/graphs/helpers'
-import {DYGRAPH_CONTAINER_V_MARGIN} from 'shared/constants'
-import {generateThresholdsListHexs} from 'shared/constants/colorOperations'
-import {colorsStringSchema} from 'shared/schemas'
-import {ErrorHandling} from 'src/shared/decorators/errors'
-
-@ErrorHandling
-class SingleStat extends PureComponent {
-  render() {
-    const {
-      data,
-      cellHeight,
-      isFetchingInitially,
-      colors,
-      prefix,
-      suffix,
-      lineGraph,
-      staticLegendHeight,
-    } = this.props
-
-    // If data for this graph is being fetched for the first time, show a graph-wide spinner.
-    if (isFetchingInitially) {
-      return (
-        <div className="graph-empty">
-          <h3 className="graph-spinner" />
-        </div>
-      )
-    }
-    const {lastValues, series} = getLastValues(data)
-    const firstAlphabeticalSeriesName = _.sortBy(series)[0]
-
-    const firstAlphabeticalindex = _.indexOf(
-      series,
-      firstAlphabeticalSeriesName
-    )
-    const lastValue = lastValues[firstAlphabeticalindex]
-    const precision = 100.0
-    const roundedValue = Math.round(+lastValue * precision) / precision
-
-    const {bgColor, textColor} = generateThresholdsListHexs({
-      colors,
-      lastValue,
-      cellType: lineGraph ? 'line-plus-single-stat' : 'single-stat',
-    })
-    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={singleStatStyles}>
-        <span
-          className={classnames('single-stat--value', {
-            'single-stat--small': cellHeight === SMALL_CELL_HEIGHT,
-          })}
-        >
-          {prefix}
-          {roundedValue}
-          {suffix}
-          {lineGraph && <div className="single-stat--shadow" />}
-        </span>
-      </div>
-    )
-  }
-}
-
-const {arrayOf, bool, number, shape, string} = PropTypes
-
-SingleStat.propTypes = {
-  data: arrayOf(shape()).isRequired,
-  isFetchingInitially: bool,
-  cellHeight: number,
-  colors: colorsStringSchema,
-  prefix: string,
-  suffix: string,
-  lineGraph: bool,
-  staticLegendHeight: number,
-}
-
-export default SingleStat
diff --git a/ui/src/shared/components/SingleStat.tsx b/ui/src/shared/components/SingleStat.tsx
new file mode 100644
index 0000000000..0b7ef2cbe0
--- /dev/null
+++ b/ui/src/shared/components/SingleStat.tsx
@@ -0,0 +1,125 @@
+import React, {PureComponent} from 'react'
+import classnames from 'classnames'
+import getLastValues from 'src/shared/parsing/lastValues'
+import _ from 'lodash'
+
+import {SMALL_CELL_HEIGHT} from 'src/shared/graphs/helpers'
+import {DYGRAPH_CONTAINER_V_MARGIN} from 'src/shared/constants'
+import {generateThresholdsListHexs} from 'src/shared/constants/colorOperations'
+import {ColorNumber} from 'src/types/colors'
+import {Data} from 'src/types/dygraphs'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Props {
+  isFetchingInitially: boolean
+  cellHeight: number
+  colors: ColorNumber[]
+  prefix?: string
+  suffix?: string
+  lineGraph: boolean
+  staticLegendHeight: number
+  data: Data
+}
+
+@ErrorHandling
+class SingleStat extends PureComponent<Props> {
+  public static defaultProps: Partial<Props> = {
+    prefix: '',
+    suffix: '',
+  }
+
+  public render() {
+    const {isFetchingInitially} = this.props
+
+    if (isFetchingInitially) {
+      return (
+        <div className="graph-empty">
+          <h3 className="graph-spinner" />
+        </div>
+      )
+    }
+
+    return (
+      <div className="single-stat" style={this.styles}>
+        <span className={this.className}>
+          {this.completeValue}
+          {this.renderShadow}
+        </span>
+      </div>
+    )
+  }
+
+  private get renderShadow(): JSX.Element {
+    const {lineGraph} = this.props
+
+    return lineGraph && <div className="single-stat--shadow" />
+  }
+
+  private get completeValue(): string {
+    const {prefix, suffix} = this.props
+
+    return `${prefix}${this.roundedLastValue}${suffix}`
+  }
+
+  private get roundedLastValue(): string {
+    const {data} = this.props
+    const {lastValues, series} = getLastValues(data)
+    const firstAlphabeticalSeriesName = _.sortBy(series)[0]
+
+    const firstAlphabeticalindex = _.indexOf(
+      series,
+      firstAlphabeticalSeriesName
+    )
+    const lastValue = lastValues[firstAlphabeticalindex]
+    const HUNDRED = 100.0
+    const roundedValue = Math.round(+lastValue * HUNDRED) / HUNDRED
+
+    return `${roundedValue}`
+  }
+
+  private get styles() {
+    const {data, colors, lineGraph, staticLegendHeight} = this.props
+
+    const {lastValues, series} = getLastValues(data)
+    const firstAlphabeticalSeriesName = _.sortBy(series)[0]
+
+    const firstAlphabeticalindex = _.indexOf(
+      series,
+      firstAlphabeticalSeriesName
+    )
+    const lastValue = lastValues[firstAlphabeticalindex]
+
+    const {bgColor, textColor} = generateThresholdsListHexs({
+      colors,
+      lastValue,
+      cellType: lineGraph ? 'line-plus-single-stat' : 'single-stat',
+    })
+
+    const backgroundColor = bgColor
+    const color = textColor
+
+    const height = `calc(100% - ${staticLegendHeight +
+      DYGRAPH_CONTAINER_V_MARGIN * 2}px)`
+
+    return staticLegendHeight
+      ? {
+          backgroundColor,
+          color,
+          height,
+        }
+      : {
+          backgroundColor,
+          color,
+        }
+  }
+
+  private get className(): string {
+    const {cellHeight} = this.props
+
+    return classnames('single-stat--value', {
+      'single-stat--small': cellHeight === SMALL_CELL_HEIGHT,
+    })
+  }
+}
+
+export default SingleStat
diff --git a/ui/src/shared/parsing/lastValues.ts b/ui/src/shared/parsing/lastValues.ts
index 0de8de3ede..a3b9eea94b 100644
--- a/ui/src/shared/parsing/lastValues.ts
+++ b/ui/src/shared/parsing/lastValues.ts
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import {Data} from 'src/types/dygraphs'
 
 interface Result {
   lastValues: number[]
@@ -24,7 +25,7 @@ export interface TimeSeriesResponse {
 }
 
 export default function(
-  timeSeriesResponse: TimeSeriesResponse[] | null
+  timeSeriesResponse: TimeSeriesResponse[] | Data | null
 ): Result {
   const values = _.get(
     timeSeriesResponse,

From f9e0371672c1e9e05fad9c8e3fc06c6458abb1b4 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 11 May 2018 15:15:33 -0700
Subject: [PATCH 2/2] Fix color dropdown by adding maxHeight attribute

---
 ui/src/shared/components/ColorDropdown.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/shared/components/ColorDropdown.js b/ui/src/shared/components/ColorDropdown.js
index 48d6484101..71ac90bb31 100644
--- a/ui/src/shared/components/ColorDropdown.js
+++ b/ui/src/shared/components/ColorDropdown.js
@@ -5,6 +5,7 @@ import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {DROPDOWN_MENU_MAX_HEIGHT} from 'src/shared/constants/index'
 
 @ErrorHandling
 class ColorDropdown extends Component {
@@ -63,7 +64,11 @@ class ColorDropdown extends Component {
         </div>
         {visible ? (
           <div className="color-dropdown--menu">
-            <FancyScrollbar autoHide={false} autoHeight={true}>
+            <FancyScrollbar
+              autoHide={false}
+              autoHeight={true}
+              maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
+            >
               {colors.map((color, i) => (
                 <div
                   className={