72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
import React, { Component } from "react";
|
||
import { Col, Container, Nav, 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 (
|
||
<div className="d-flex flex-fill flex-column">
|
||
<Navbar bg="light" expand="lg" className="border-bottom">
|
||
<Navbar.Brand href="#home">Rustico - BfxBot</Navbar.Brand>
|
||
</Navbar>
|
||
|
||
<Container fluid className="mt-2 border flex-fill d-flex">
|
||
<Row className="flex-fill">
|
||
{/* Toolbar column */}
|
||
<Col md={4} lg={4} className="border-right">
|
||
<Row className="justify-content-center border-bottom py-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>
|
||
</Col>
|
||
|
||
{/* Graph column */}
|
||
<Col md={8} lg={8} className="flex-fill">
|
||
<div className="border-bottom mt-2">
|
||
<h2>Price graph:</h2>
|
||
|
||
</div>
|
||
<RPlot />
|
||
</Col>
|
||
</Row>
|
||
{/* <Row className="flex-grow-1 border-top border-bottom">
|
||
<RPlot />
|
||
</Row> */}
|
||
</Container >
|
||
<footer className="footer fixed-bottom py-3 bg-light border-top">
|
||
<Container className="text-center">
|
||
<span className="text-muted">Made with ❤️ by the Pepe</span>
|
||
</Container>
|
||
</footer>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default App; |