Add JSON based plots

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -4,11 +4,11 @@ import BarChart from '@material-ui/icons/BarChart'
 import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'
+import TopicPlot from '../TopicPlot'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
+import { isPlottable } from '../CodeDiff/util'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 
-const PlotHistory = React.lazy(() => import('./PlotHistory'))
-
 const throttle = require('lodash.throttle')
 
 interface Props {
@@ -76,33 +76,19 @@ class MessageHistory extends React.Component<Props, State> {
       return element
     })
 
-    const numericMessages = history
-      .map((message: q.Message) => {
-        const value = message.value ? parseFloat(Base64Message.toUnicodeString(message.value)) : NaN
-        return { x: message.received.getTime(), y: value  }
-      }).filter(data => !isNaN(data.y))
-    const showPlot = numericMessages.length >= 2
-
+    const isMessagePlottable = node.message && node.message.value && isPlottable(Base64Message.toUnicodeString(node.message.value))
     return (
       <div>
         <History
           items={historyElements}
-          contentTypeIndicator={showPlot ? <BarChart /> : undefined}
+          contentTypeIndicator={isMessagePlottable ? <BarChart /> : undefined}
           onClick={this.displayMessage}
         >
-          {showPlot ? this.renderPlot(numericMessages) : null}
+          {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}
         </History>
       </div>
     )
   }
-
-  public renderPlot(data: Array<{x: number, y: number}>) {
-    return (
-      <React.Suspense fallback={<div>Loading...</div>}>
-        <PlotHistory data={data} />
-      </React.Suspense>
-    )
-  }
 }
 
 export default MessageHistory

app/src/components/Sidebar/ValueRenderer/PlotHistory.tsx

@@ -1,72 +0,0 @@
-import * as q from '../../../../../backend/src/Model'
-import * as React from 'react'
-import DateFormatter from '../../helper/DateFormatter'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import 'react-vis/dist/style.css'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
-const { XYPlot, LineMarkSeries, Hint, YAxis, HorizontalGridLines } = require('react-vis')
-const abbreviate = require('number-abbreviate')
-
-interface Props {
-  data: Array<{x: number, y: number}>
-}
-
-interface Stats {
-  width: number
-  value?: any
-}
-
-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 })
-  }
-
-  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,
-    })
-  }
-
-  private _rememberValue = (value: any) => {
-    this.setState({ value })
-  }
-
-  public render() {
-    const data = this.props.data
-
-    return (
-      <div>
-        <XYPlot width={this.state.width} height={150}>
-          <HorizontalGridLines />
-          <YAxis
-            width={45}
-            tickFormat={(num: number) => abbreviate(num)}
-          />
-          <LineMarkSeries
-            onValueMouseOver={this._rememberValue}
-            onValueMouseOut={this._forgetValue}
-            size={3}
-            data={data}
-            curve={data.length < 50 ? 'curveCardinal' : undefined}
-          />
-          {this.state.value ? <Hint format={this.hintFormatter} value={this.state.value} /> : null}
-        </XYPlot>
-        <ReactResizeDetector handleWidth={true} onResize={this.resize} />
-      </div>
-    )
-  }
-}
-
-export default PlotHistory

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -9,7 +9,7 @@ import { ValueRendererDisplayMode } from '../../../reducers/Settings'
 
 interface Props {
   message: q.Message
-  messageHistory: q.RingBuffer<q.Message>
+  messageHistory: q.MessageHistory
   compareWith?: q.Message
   renderMode: ValueRendererDisplayMode
 }
@@ -27,6 +27,7 @@ class ValueRenderer extends React.Component<Props, State> {
   private renderDiff(current: string = '', previous: string = '', language?: 'json') {
     return (
       <CodeDiff
+        messageHistory={this.props.messageHistory}
         previous={previous}
         current={current}
         language={language}