core/websrc/components/RPlot.tsx
2020-12-14 13:14:32 +00:00

76 lines
1.8 KiB
TypeScript

import React from "react"
import { Component } from "react"
import Plot from "react-plotly.js"
import { NewTickData, socket } from '../';
type FirstConnectData = {
ticks: Array<number>,
prices: Array<number>
}
type PlotState = {
x: Array<number>,
y: Array<number>
}
class RPlot extends Component<{}, PlotState> {
constructor(props) {
super(props)
}
state = {
x: [],
y: []
}
componentDidMount() {
socket.on("first_connect", (data: FirstConnectData) => {
this.setState({
x: data.ticks,
y: data.prices
})
})
socket.on("new_tick", (data: NewTickData) => {
var new_x = [...this.state.x, data.tick]
var new_y = [...this.state.y, data.price]
// cutting to up to 500 entries (last 500)
var x = new_x.slice(Math.max(new_x.length - 500, 0))
var y = new_y.slice(Math.max(new_y.length - 500, 0))
this.setState({
x: x,
y: y,
})
})
}
render() {
return (
<Plot
data={[
{
x: this.state.x,
y: this.state.y,
type: 'scatter',
mode: 'lines+markers',
"marker.colorbar": { tickformat: ".1f"}
},
]}
layout={{ dragmode: "pan", autosize: true }}
config={{
scrollZoom: true,
displayModeBar: false,
responsive: true,
}}
style={{ width: '90%', height: '90%' }}
/>
)
}
}
export default RPlot;