Add numeric history plot

Resolves #31

app/src/components/Sidebar/History.tsx

@@ -28,16 +28,18 @@ class MessageHistory extends React.Component<Props, State> {
   }
 
   public renderHistory() {
+    const style = {
+      backgroundColor: 'rgba(80, 80, 80, 0.6)',
+      margin: '8px',
+      padding: '8px 8px 0 8px',
+      cursor: this.props.onClick ? 'pointer' : 'inherit',
+    }
+
     const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
     const elements = this.props.items.map((element, index) => (
       <div
         key={index}
-        style={{
-          backgroundColor: 'rgba(80, 80, 80, 0.6)',
-          margin: '8px',
-          padding: '8px 8px 0 8px',
-          cursor: this.props.onClick ? 'pointer' : 'inherit',
-        }}
+        style={style}
         onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
       >
         <div><i>{element.title}</i></div>
@@ -65,6 +67,7 @@ class MessageHistory extends React.Component<Props, State> {
           </Badge>
         </Typography>
         <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
+          {this.state.collapsed ? null : this.props.children}
           {this.state.collapsed ? null : elements}
         </div>
       </div>

app/src/components/Sidebar/MessageHistory.tsx

@@ -5,6 +5,7 @@ import { Theme, withTheme } from '@material-ui/core/styles'
 
 import DateFormatter from '../DateFormatter'
 import History from './History'
+import PlotHistory from './PlotHistory'
 
 const throttle = require('lodash.throttle')
 
@@ -48,8 +49,8 @@ class MessageHistory extends React.Component<Props, State> {
       return null
     }
 
-    const history = node.messageHistory.toArray().reverse()
-    const historyElements = history.map(message => ({
+    const history = node.messageHistory.toArray()
+    const historyElements = history.reverse().map(message => ({
       title: <DateFormatter date={message.received} />,
       value: message.value,
     }))
@@ -59,11 +60,22 @@ class MessageHistory extends React.Component<Props, State> {
         <History
           items={historyElements}
           onClick={this.displayMessage}
-        />
+        >
+          {this.renderPlot(history)}
+        </History>
       </div>
     )
   }
 
+  public renderPlot(history: q.Message[]) {
+    const numbers = history.filter(message => !isNaN(message.value))
+    if (numbers.length < 3) {
+      return null
+    }
+
+    return <PlotHistory messages={numbers} />
+  }
+
   private displayMessage = (index: number, eventTarget: EventTarget) => {
     const message = this.props.node && this.props.node.messageHistory.toArray()[index]
     this.props.onSelect(message)

app/src/components/Sidebar/PlotHistory.tsx

@@ -0,0 +1,48 @@
+const { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } = require('react-vis')
+import { default as ReactResizeDetector } from 'react-resize-detector'
+
+import * as React from 'react'
+import * as q from '../../../../backend/src/Model'
+import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import 'react-vis/dist/style.css'
+
+interface Props {
+  messages: q.Message[]
+}
+
+interface Stats {
+  width: number
+}
+
+class PlotHistory extends React.Component<Props, Stats> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { width: 300 }
+  }
+
+  private resize = (width: number, height: number) => {
+    this.setState({ width: width - 12 })
+  }
+
+  public render() {
+    const data = this.props.messages.map((message) => {
+      return {
+        x: message.received,
+        y: message.value,
+      }
+    })
+
+    return (
+      <div>
+        <XYPlot width={this.state.width} height={150}>
+          <HorizontalGridLines />
+          <LineSeries data={data} />
+          <YAxis />
+        </XYPlot>
+        <ReactResizeDetector handleWidth={true} onResize={this.resize} />
+      </div>
+    )
+  }
+}
+
+export default withStyles({}, { withTheme: true })(PlotHistory)