code cleanup
This commit is contained in:
parent
d72421eeb2
commit
2cbb21f6cf
@ -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>
|
||||||
|
@ -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>);
|
||||||
}
|
}
|
||||||
|
@ -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%'}}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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"));
|
||||||
|
Loading…
Reference in New Issue
Block a user