From ccc18d1da54cf69cfccfc36df8ee8e9784a95b3a Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Fri, 12 Jan 2018 12:33:42 -0800
Subject: [PATCH] WIP initial annotation

---
 ui/src/shared/components/Annotation.js | 27 ++++++++++++++++++++++++++
 ui/src/shared/components/Dygraph.js    | 24 ++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/shared/components/Annotation.js

diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js
new file mode 100644
index 0000000000..0059437f7c
--- /dev/null
+++ b/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
diff --git a/ui/src/shared/components/Dygraph.js b/ui/src/shared/components/Dygraph.js
index 5d53440271..c490dbd804 100644
--- a/ui/src/shared/components/Dygraph.js
+++ b/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}