rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

code cleanup

Browse Source
This commit is contained in:
Giulio De Pasquale 2020-12-14 18:52:43 +00:00
parent d72421eeb2
commit 2cbb21f6cf
6 changed files with 90 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
websrc/components/App.tsx
View File

@ -1,9 +1,9 @@
import React, { Component } from "react"; import React, {Component} from "react";
import { Col, Container, Nav, Navbar, Row } from "react-bootstrap"; import {Col, Container, Navbar, Row} from "react-bootstrap";
import HCard from "./HCard"; import HCard from "./HCard";
import RPlot from "./RPlot"; import RPlot from "./RPlot";
import { NewTickData, PositionState, socket } from "../"; import {NewTickData, PositionState, socket} from "../";
import { PositionTable } from "./Tables"; import {PositionTable} from "./Tables";
type AppState = { type AppState = {
current_price: number, current_price: number,
@ -13,11 +13,7 @@ type AppState = {
} }
class App extends Component { class App extends Component<{}, AppState> {
constructor(props) {
super(props)
}
state = { state = {
current_price: 0, current_price: 0,
current_tick: 0, current_tick: 0,
@ -25,6 +21,10 @@ class App extends Component {
positions: [] positions: []
} }
constructor(props) {
super(props)
}
componentDidMount() { componentDidMount() {
socket.on("new_tick", (data: NewTickData) => { socket.on("new_tick", (data: NewTickData) => {
this.setState({ this.setState({
@ -48,11 +48,13 @@ class App extends Component {
{/* Toolbar column */} {/* Toolbar column */}
<Col md={4} lg={4} className="border-right"> <Col md={4} lg={4} className="border-right">
<Row className="justify-content-center border-bottom py-2"> <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)}
<HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard> update={this.state.last_update}/>
<HCard title="Current price:" content={String(this.state.current_price)}
update={this.state.last_update}/>
</Row> </Row>
<Row> <Row>
<PositionTable /> <PositionTable/>
</Row> </Row>
</Col> </Col>
@ -62,13 +64,13 @@ class App extends Component {
<h2>Price graph:</h2> <h2>Price graph:</h2>
</div> </div>
<RPlot /> <RPlot/>
</Col> </Col>
</Row> </Row>
{/* <Row className="flex-grow-1 border-top border-bottom"> {/* <Row className="flex-grow-1 border-top border-bottom">
<RPlot /> <RPlot />
</Row> */} </Row> */}
</Container > </Container>
<footer className="footer fixed-bottom py-3 bg-light border-top"> <footer className="footer fixed-bottom py-3 bg-light border-top">
<Container className="text-center"> <Container className="text-center">
<span className="text-muted">Made with ❤️ by the Pepe</span> <span className="text-muted">Made with ❤️ by the Pepe</span>

10
websrc/components/HCard.tsx
View File

@ -1,6 +1,5 @@
import React, { Component } from 'react'; import React, {Component} from 'react';
import { FunctionComponent } from 'react'; import {Card, Col, Row} from 'react-bootstrap';
import { Card, Col, Row } from 'react-bootstrap';
type CardProps = { type CardProps = {
title: string, title: string,
@ -16,7 +15,7 @@ class HCard extends Component<CardProps> {
render() { render() {
return ( return (
<Card bg="light" style={{ minWidth: "15rem" }} className="mx-auto"> <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>
@ -31,7 +30,8 @@ class HCard extends Component<CardProps> {
</Col> </Col>
</Row> </Row>
<Card.Text className="border-top text-center"> <Card.Text className="border-top text-center">
<small className="text-muted my-auto mx-2">Last updated {this.props.update.toLocaleTimeString('en-GB')}</small> <small className="text-muted my-auto mx-2">Last
updated {this.props.update.toLocaleTimeString('en-GB')}</small>
</Card.Text> </Card.Text>
</Card>); </Card>);
} }

21
websrc/components/RPlot.tsx
View File

@ -1,8 +1,7 @@
import React from "react" import React, {Component} from "react"
import { Component } from "react"
import Plot from "react-plotly.js" import Plot from "react-plotly.js"
import { NewTickData, socket } from '../'; import {NewTickData, socket} from '../';
type FirstConnectData = { type FirstConnectData = {
@ -26,15 +25,15 @@ type PlotState = {
} }
class RPlot extends Component<{}, PlotState> { class RPlot extends Component<{}, PlotState> {
constructor(props) {
super(props)
}
state = { state = {
x: [], x: [],
y: [], y: [],
h_price_line: { x0: 0, x1: 0, y0: 0, y1: 0 }, h_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
v_price_line: { x0: 0, x1: 0, y0: 0, y1: 0 }, v_price_line: {x0: 0, x1: 0, y0: 0, y1: 0},
}
constructor(props) {
super(props)
} }
componentDidMount() { componentDidMount() {
@ -96,7 +95,7 @@ class RPlot extends Component<{}, PlotState> {
y: this.state.y, y: this.state.y,
type: 'scatter', type: 'scatter',
mode: 'lines+markers', mode: 'lines+markers',
"marker.colorbar": { tickformat: "r" } "marker.colorbar": {tickformat: "r"}
}, },
]} ]}
layout={{ layout={{
@ -150,7 +149,7 @@ class RPlot extends Component<{}, PlotState> {
displayModeBar: false, displayModeBar: false,
responsive: true, responsive: true,
}} }}
style={{ width: '100%', height: '90%' }} style={{width: '100%', height: '90%'}}
/> />
) )
} }

21
websrc/components/RToast.tsx
View File

@ -1,7 +1,6 @@
import React, { Component } from 'react'; import React, {Component} from 'react';
import { FunctionComponent } from 'react'; import {Toast} from 'react-bootstrap';
import { Card, Col, Row, Toast } from 'react-bootstrap'; import {socket} from "../";
import { socket } from "../";
type ToastProps = { type ToastProps = {
title: string, title: string,
@ -16,23 +15,23 @@ type ToastState = {
export class RToast extends Component<ToastProps, ToastState> { export class RToast extends Component<ToastProps, ToastState> {
constructor(props: ToastProps) {
super(props)
}
state = { state = {
lastUpdated: new Date(), lastUpdated: new Date(),
show: false show: false
} }
constructor(props: ToastProps) {
super(props)
}
componentDidMount() { componentDidMount() {
socket.on("connect", () => { socket.on("connect", () => {
this.setState({ show: true }) this.setState({show: true})
}) })
} }
tick() { tick() {
this.setState({ lastUpdated: new Date() }) this.setState({lastUpdated: new Date()})
} }
render() { render() {
@ -42,7 +41,7 @@ export class RToast extends Component<ToastProps, ToastState> {
<strong className="mr-auto">{this.props.title}</strong> <strong className="mr-auto">{this.props.title}</strong>
<small>{this.state.lastUpdated.toLocaleTimeString('en-GB')}</small> <small>{this.state.lastUpdated.toLocaleTimeString('en-GB')}</small>
</Toast.Header> </Toast.Header>
{ this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null} {this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
</Toast> </Toast>
) )
} }

97
websrc/components/Tables.tsx
View File

@ -1,57 +1,56 @@
import React from "react" import React, {Component} from "react"
import { Component } from "react" import {Container, Table} from "react-bootstrap"
import { Container, Table } from "react-bootstrap" import {NewTickData, PositionState, socket} from '../';
import { NewTickData, PositionState, socket } from '../';
export class PositionTable extends Component<{}, { positions: Array<PositionState> }> { export class PositionTable extends Component<{}, { positions: Array<PositionState> }> {
constructor(props) { state = {
super(props) positions: []
} }
state = { constructor(props) {
positions: [] super(props)
} }
componentDidMount() { componentDidMount() {
socket.on('new_tick', (data: NewTickData) => { socket.on('new_tick', (data: NewTickData) => {
this.setState({ this.setState({
positions: data.positions positions: data.positions
}) })
}) })
} }
tableData() { tableData() {
return this.state.positions.map((position: PositionState, idx) => { return this.state.positions.map((position: PositionState, idx) => {
return (<tr key={position.id}> return (<tr key={position.id}>
<th>{position.id}</th> <th>{position.id}</th>
<th>{position.symbol}</th> <th>{position.symbol}</th>
<th>{position.profit_loss.toFixed(2)}</th> <th>{position.profit_loss.toFixed(2)}</th>
<th>{position.profit_loss_percentage.toFixed(2)} %</th> <th>{position.profit_loss_percentage.toFixed(2)} %</th>
</tr>) </tr>)
}) })
} }
render() { render() {
return ( return (
<Container className="d-flex flex-column mt-2"> <Container className="d-flex flex-column mt-2">
<div className="border-bottom"> <div className="border-bottom">
<h2>Open positions</h2> <h2>Open positions</h2>
</div> </div>
<Table id="positions" size="sm" hover striped bordered className="mt-2 text-center"> <Table id="positions" size="sm" hover striped bordered className="mt-2 text-center">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Symbol</th> <th>Symbol</th>
<th>P/L</th> <th>P/L</th>
<th>P/L %</th> <th>P/L %</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{this.tableData()} {this.tableData()}
</tbody> </tbody>
</Table> </Table>
</Container> </Container>
) )
} }
} }

2
websrc/index.tsx
View File

@ -23,4 +23,4 @@ socket.on("connect", function () {
console.log("Connected!") console.log("Connected!")
}) })
ReactDOM.render(<App />, document.getElementById("root")); ReactDOM.render(<App/>, document.getElementById("root"));