import React, {Component} from "react" import Plot from "react-plotly.js" import {NewTickData, socket} from '../'; type FirstConnectData = { ticks: Array, prices: Array } type PriceLine = { x0: number, y0: number, x1: number, y1: number } type PlotState = { x: Array, y: Array, h_price_line: PriceLine, } class RPlot extends Component<{}, PlotState> { state = { x: [], y: [], h_price_line: {x0: 0, x1: 0, y0: 0, y1: 0}, } constructor(props) { super(props) } componentDidMount() { socket.on("first_connect", (data: FirstConnectData) => { const last_tick = data.ticks[data.ticks.length - 1]; const last_price = data.prices[data.prices.length - 1]; this.setState({ x: data.ticks, y: data.prices, h_price_line: { x0: 0, y0: last_price, x1: last_tick, y1: last_price }, }) }) socket.on("new_tick", (data: NewTickData) => { const new_x = [...this.state.x, data.tick]; const new_y = [...this.state.y, data.price]; // cutting to up to 500 entries (last 500) const x = new_x.slice(Math.max(new_x.length - 500, 0)); const y = new_y.slice(Math.max(new_y.length - 500, 0)); this.setState({ x: x, y: y, h_price_line: { x0: 0, y0: data.price, x1: data.tick, y1: data.price }, }) }) } render() { return ( ) } } export default RPlot;