WIP initial annotation

ui/src/shared/components/Annotation.js

@@ -0,0 +1,27 @@
+import React, {PropTypes} from 'react'
+
+const calcStyle = (annotation, dygraph) => {
+  return {
+    position: 'absolute',
+    top: '0px',
+    left: `${dygraph.toDomXCoord(annotation.time)}px`,
+    backgroundColor: '#f00',
+    height: '100%',
+    width: '2px',
+    transform: 'translateX(-50%)',
+    zIndex: '10',
+  }
+}
+const Annotation = ({annotation, dygraph}) =>
+  <div className="dygraph-annotation" style={calcStyle(annotation, dygraph)} />
+
+const {shape, string} = PropTypes
+
+Annotation.propTypes = {
+  annotation: shape({
+    time: string.isRequired,
+  }).isRequired,
+  dygraph: shape({}).isRequired,
+}
+
+export default Annotation

ui/src/shared/components/Dygraph.js

@@ -5,8 +5,10 @@ import _ from 'lodash'
 import NanoDate from 'nano-date'
 
 import Dygraphs from 'src/external/dygraph'
-import getRange, {getStackedRange} from 'shared/parsing/getRangeForDygraph'
 import DygraphLegend from 'src/shared/components/DygraphLegend'
+import Annotation from 'src/shared/components/Annotation'
+
+import getRange, {getStackedRange} from 'shared/parsing/getRangeForDygraph'
 import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
 import {buildDefaultYLabel} from 'shared/presenters'
 import {numberValueFormatter} from 'src/utils/formatting'
@@ -20,6 +22,22 @@ import {
   highlightSeriesOpts,
 } from 'src/shared/graphs/helpers'
 const {LINEAR, LOG, BASE_10, BASE_2} = DISPLAY_OPTIONS
+const annotations = [
+  {
+    group: '',
+    name: 'anno1',
+    time: '1515716169000',
+    duration: '',
+    text: 'you have no swoggels',
+  },
+  {
+    group: '',
+    name: 'anno1',
+    time: `${1515716169000 + 3600000}`,
+    duration: '',
+    text: 'you have one swog',
+  },
+]
 
 export default class Dygraph extends Component {
   constructor(props) {
@@ -392,6 +410,10 @@ export default class Dygraph extends Component {
 
     return (
       <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
+        {this.dygraph &&
+          annotations.map((a, i) =>
+            <Annotation key={i} annotation={a} dygraph={this.dygraph} />
+          )}
         <DygraphLegend
           {...legend}
           graph={this.graphRef}