core/websrc/components/App.tsx

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;