WIP convert Crosshair to TypeScript

ui/package.json

@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@types/chai": "^4.1.2",
+    "@types/dygraphs": "^1.1.6",
     "@types/enzyme": "^3.1.9",
     "@types/jest": "^22.1.4",
     "@types/lodash": "^4.14.104",

ui/src/shared/components/Crosshair.tsx

@@ -0,0 +1,56 @@
+import React, {PureComponent} from 'react'
+import Dygraph from 'dygraphs'
+import classnames from 'classnames'
+import {connect} from 'react-redux'
+
+import {DYGRAPH_CONTAINER_XLABEL_MARGIN} from 'src/shared/constants'
+import {NULL_HOVER_TIME} from 'src/shared/constants/tableGraph'
+
+interface Props {
+  hoverTime: number
+  dygraph: Dygraph
+  staticLegendHeight: number
+}
+
+class Crosshair extends PureComponent<Props> {
+  public render() {
+    return (
+      <div className="crosshair-container">
+        <div
+          className={classnames('crosshair', {
+            hidden: this.isHidden,
+          })}
+          style={{
+            left: this.crosshairLeft,
+            height: this.crosshairHeight,
+            zIndex: 1999,
+          }}
+        />
+      </div>
+    )
+  }
+
+  private get crosshairLeft(): number {
+    const {dygraph, hoverTime} = this.props
+
+    return Math.round(
+      Math.max(-1000, dygraph.toDomXCoord(hoverTime)) || -1000 + 1
+    )
+  }
+
+  private get crosshairHeight(): string {
+    return `calc(100% - ${this.props.staticLegendHeight +
+      DYGRAPH_CONTAINER_XLABEL_MARGIN}px)`
+  }
+
+  private get isHidden(): boolean {
+    return this.props.hoverTime === +NULL_HOVER_TIME
+  }
+}
+
+const mapStateToProps = ({dashboardUI, annotations: {mode}}) => ({
+  mode,
+  hoverTime: +dashboardUI.hoverTime,
+})
+
+export default connect(mapStateToProps, null)(Crosshair)

ui/src/shared/components/Dygraph.js

@@ -296,7 +296,7 @@ class Dygraph extends Component {
 
   render() {
     const {isHidden, staticLegendHeight} = this.state
-    const {staticLegend, children, hoverTime} = this.props
+    const {staticLegend, children} = this.props
     const nestedGraph = (children && children.length && children[0]) || children
     let dygraphStyle = {...this.props.containerStyle, zIndex: '2'}
     if (staticLegend) {
@@ -327,7 +327,6 @@ class Dygraph extends Component {
             <Crosshair
               dygraph={this.dygraph}
               staticLegendHeight={staticLegendHeight}
-              hoverTime={hoverTime}
             />
           </div>
         )}
@@ -417,7 +416,6 @@ Dygraph.propTypes = {
   timeRange: shape({
     lower: string.isRequired,
   }),
-  hoverTime: string,
   setResolution: func,
   dygraphRef: func,
   onZoom: func,

ui/src/shared/components/RefreshingGraph.js

@@ -123,7 +123,6 @@ const RefreshingGraph = ({
       templates={templates}
       timeRange={timeRange}
       autoRefresh={autoRefresh}
-      hoverTime={hoverTime}
       isBarGraph={type === 'bar'}
       resizeCoords={resizeCoords}
       staticLegend={staticLegend}

ui/yarn.lock

@@ -24,6 +24,12 @@
   version "0.22.7"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.7.tgz#4a92eafedfb2b9f4437d3a4410006d81114c66ce"
 
+"@types/dygraphs@^1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@types/dygraphs/-/dygraphs-1.1.6.tgz#20ff1a01e353e813ff97898c0fee5defc66626be"
+  dependencies:
+    "@types/google.visualization" "*"
+
 "@types/enzyme@^3.1.9":
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.9.tgz#fbd97f3beb7cad76fc9c6f04c97d77f4834522ef"
@@ -31,6 +37,10 @@
     "@types/cheerio" "*"
     "@types/react" "*"
 
+"@types/google.visualization@*":
+  version "0.0.41"
+  resolved "https://registry.yarnpkg.com/@types/google.visualization/-/google.visualization-0.0.41.tgz#cd4858a66fd039e31586ef3989c59ab0e42d0392"
+
 "@types/history@^3":
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.2.tgz#b6affa240cb10b5f841c6443d8a24d7f3fc8bb0c"