core/websrc/components/RPlot.tsx

116 lines
3.0 KiB
TypeScript
Raw Normal View History

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>
}
2020-12-14 15:37:12 +00:00
type PriceLine = {
x0: number,
y0: number,
x1: number,
y1: number
}
type PlotState = {
x: Array<number>,
2020-12-14 15:37:12 +00:00
y: Array<number>,
price_line: PriceLine
}
class RPlot extends Component<{}, PlotState> {
constructor(props) {
super(props)
}
state = {
x: [],
2020-12-14 15:37:12 +00:00
y: [],
price_line: { x0: 0, x1: 0, y0: 0, y1: 0 }
}
componentDidMount() {
socket.on("first_connect", (data: FirstConnectData) => {
2020-12-14 15:37:12 +00:00
var last_tick = data.ticks[data.ticks.length - 1]
var last_price = data.prices[data.prices.length - 1]
this.setState({
x: data.ticks,
2020-12-14 15:37:12 +00:00
y: data.prices,
price_line: {
x0: 0,
y0: last_price,
x1: last_tick,
y1: last_price
}
})
})
socket.on("new_tick", (data: NewTickData) => {
2020-12-14 13:14:32 +00:00
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({
2020-12-14 13:14:32 +00:00
x: x,
y: y,
2020-12-14 15:37:12 +00:00
price_line: {
x0: 0,
y0: data.price,
x1: data.tick,
y1: data.price
}
})
})
}
render() {
return (
<Plot
data={[
{
x: this.state.x,
y: this.state.y,
type: 'scatter',
mode: 'lines+markers',
2020-12-14 15:37:12 +00:00
"marker.colorbar": { tickformat: ".1f" }
},
]}
2020-12-14 15:37:12 +00:00
layout={{
dragmode: "pan", autosize: true, shapes: [
{
type: 'line',
x0: this.state.price_line.x0,
y0: this.state.price_line.y0,
x1: this.state.price_line.x1,
y1: this.state.price_line.y1,
line: {
color: 'rgb(50, 171, 96)',
width: 2,
dash: 'dashdot'
}
},
]
}}
config={{
scrollZoom: true,
displayModeBar: false,
responsive: true,
}}
style={{ width: '100%', height: '90%' }}
/>
)
}
}
export default RPlot;