48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React, { Component } from "react";
|
|
import { Col, Container, Navbar, Row } from "react-bootstrap";
|
|
import Plot from "react-plotly.js";
|
|
import HCard from "./HCard";
|
|
import RPlot from "./RPlot";
|
|
import { RToast } from "./RToast";
|
|
import { NewTickData, socket } from "../";
|
|
|
|
type AppState = {
|
|
current_price: number,
|
|
current_tick: number,
|
|
last_update: Date
|
|
}
|
|
|
|
class App extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
current_price: 0,
|
|
current_tick: 0,
|
|
last_update: new Date()
|
|
}
|
|
|
|
componentDidMount() {
|
|
socket.on("new_tick", (data: NewTickData) => {
|
|
this.setState({ current_price: data.price, current_tick: data.tick, last_update: new Date() })
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Container className="flex-fill border d-flex flex-column">
|
|
<Row className="justify-content-center my-2">
|
|
<HCard title="Current tick:" content={String(this.state.current_tick)} update={this.state.last_update}></HCard>
|
|
<HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard>
|
|
</Row>
|
|
|
|
<Row className="flex-grow-1 border-top border-bottom">
|
|
<RPlot />
|
|
</Row>
|
|
</Container >
|
|
)
|
|
}
|
|
}
|
|
|
|
export default App; |