From 0f7ea7c49172a38cb637da57730f4fb6a2898a46 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <thomas.nordquist@viison.com>
Date: Sun, 20 Jan 2019 13:37:13 +0100
Subject: [PATCH] Add formatter to plot tooltip

---
 app/src/components/Sidebar/PlotHistory.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/components/Sidebar/PlotHistory.tsx b/app/src/components/Sidebar/PlotHistory.tsx
index 887c45f..4ba2590 100644
--- a/app/src/components/Sidebar/PlotHistory.tsx
+++ b/app/src/components/Sidebar/PlotHistory.tsx
@@ -1,6 +1,7 @@
 const { XYPlot, XAxis, LineMarkSeries, Hint, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
 import { default as ReactResizeDetector } from 'react-resize-detector'
 
+import DateFormatter from '../DateFormatter'
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
@@ -45,13 +46,20 @@ class PlotHistory extends React.Component<Props, Stats> {
             data={data}
             curve="curveCardinal"
           />
-          {this.state.value ? <Hint value={this.state.value} /> : null}
+          {this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null}
         </XYPlot>
         <ReactResizeDetector handleWidth={true} onResize={this.resize} />
       </div>
     )
   }
 
+  private hintFormatter = (point: any) => {
+    return [
+      { title: <b>Time</b>, value: <DateFormatter date={new Date(point.x)} /> },
+      { title: <b>Value</b>, value: point.y },
+    ]
+  }
+
   private _forgetValue = () => {
     this.setState({
       value: undefined,