import React from "react" import { Component } from "react" import Plot from "react-plotly.js" import { NewTickData, socket } from '../'; type FirstConnectData = { ticks: Array, prices: Array } type PlotState = { x: Array, y: Array } 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 ( ) } } export default RPlot;