reorganized layout with navbar and two cols

This commit is contained in:
Giulio De Pasquale 2020-12-14 13:55:33 +00:00
parent 119d80a936
commit 3e45135809
5 changed files with 40 additions and 28 deletions

View File

@ -108,15 +108,10 @@ class SymbolStatus:
return self.positions[self.current_tick] return self.positions[self.current_tick]
def all_ticks(self) -> List[int]: def all_ticks(self) -> List[int]:
return [x for x in range(self.current_tick)] return [x for x in range(1, self.current_tick + 1)]
def all_prices(self) -> List[float]: def all_prices(self) -> List[float]:
res = [] return list(map(lambda x: self.prices[x], range(1, self.current_tick + 1)))
for x in range(1, self.current_tick):
res.append(self.prices[x])
return res
# Applies strategy and adds position to list # Applies strategy and adds position to list
async def add_position(self, position: Position): async def add_position(self, position: Position):

View File

@ -10,9 +10,7 @@
<title>Hello world!</title> <title>Hello world!</title>
<body class="h-100 d-flex flex-column"> <body class="h-100 d-flex flex-column">
<div id="root" class="my-2 flex-fill d-flex"> <div id="root" class="d-flex flex-fill"></div>
</div>
<!-- <main class="container my-2 border h-100"> <!-- <main class="container my-2 border h-100">
<div class="row row-cols-auto justify-content-center my-2" id="statistics"> <div class="row row-cols-auto justify-content-center my-2" id="statistics">
@ -129,11 +127,6 @@
</footer> --> </footer> -->
<script src="{{ url_for('static', filename='index.js') }}"></script> <script src="{{ url_for('static', filename='index.js') }}"></script>
<footer class="footer py-3 bg-light border-top">
<div class="container text-center">
<span class="text-muted">Made with ❤️ by the Pepe</span>
</div>
</footer>
</body> </body>
</html> </html>

View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Col, Container, Navbar, Row } from "react-bootstrap"; import { Col, Container, Nav, Navbar, Row } from "react-bootstrap";
import Plot from "react-plotly.js"; import Plot from "react-plotly.js";
import HCard from "./HCard"; import HCard from "./HCard";
import RPlot from "./RPlot"; import RPlot from "./RPlot";
@ -31,16 +31,40 @@ class App extends Component {
render() { render() {
return ( return (
<Container className="flex-fill border d-flex flex-column"> <div className="d-flex flex-fill flex-column">
<Row className="justify-content-center my-2"> <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 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> <HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard>
</Row> </Row>
</Col>
<Row className="flex-grow-1 border-top border-bottom"> {/* Graph column */}
<Col md={8} lg={8} className="flex-fill">
<div className="border-bottom mt-2">
<h2>Price graph:</h2>
</div>
<RPlot /> <RPlot />
</Col>
</Row> </Row>
{/* <Row className="flex-grow-1 border-top border-bottom">
<RPlot />
</Row> */}
</Container > </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>
) )
} }
} }

View File

@ -16,7 +16,7 @@ class HCard extends Component<CardProps> {
render() { render() {
return ( return (
<Card bg="light" style={{ minWidth: "15rem" }}> <Card bg="light" style={{ minWidth: "15rem" }} className="mx-auto">
<Row className="no-gutters"> <Row className="no-gutters">
<Col md={7} className="border-right my-auto"> <Col md={7} className="border-right my-auto">
<h3 className="text-center">{this.props.title}</h3> <h3 className="text-center">{this.props.title}</h3>

View File

@ -66,7 +66,7 @@ class RPlot extends Component<{}, PlotState> {
displayModeBar: false, displayModeBar: false,
responsive: true, responsive: true,
}} }}
style={{ width: '90%', height: '90%' }} style={{ width: '100%', height: '90%' }}
/> />
) )
} }