import React, {Component} from "react" import Plot from "react-plotly.js" import {socket} from '../'; import {NewTickMessage} from "../types"; type FirstConnectData = { ticks: Array, prices: Array } type PriceLine = { x0: number, y0: number, x1: number, y1: number } type PlotState = { x: Array, y: Array, current_price_line: PriceLine, positions_price_lines: Array, } class RPlot extends Component<{}, PlotState> { state = { x: [], y: [], current_price_line: {x0: 0, x1: 0, y0: 0, y1: 0}, positions_price_lines: [] } 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, current_price_line: { x0: 0, y0: last_price, x1: last_tick, y1: last_price }, }) }) socket.on("new_tick", (data: NewTickMessage) => { const position_price_lines = data.positions.map((pstat): PriceLine => { return { x0: 0, y0: pstat.base_price, x1: data.tick, y1: pstat.base_price } }) this.setState({ x: x, y: y, current_price_line: { x0: 0, y0: data.price, x1: data.tick, y1: data.price }, positions_price_lines: position_price_lines }) }) } render() { let additional_shapes = [] if (this.state.positions_price_lines.length > 0) { additional_shapes = this.state.positions_price_lines.map((priceline: PriceLine) => { return { type: 'line', x0: priceline.x0, y0: priceline.y0, x1: priceline.x1, y1: priceline.y1, line: { color: 'rgb(1, 1, 1)', width: 1, dash: 'solid' } } }) } return ( ) } } export default RPlot;