graph working. old functional components are now standard components
This commit is contained in:
parent
035d7831ae
commit
3f09e9fea8
@ -1,42 +1,46 @@
|
||||
import React, { Component } from "react";
|
||||
import { Container, Navbar, Row } from "react-bootstrap";
|
||||
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 flex-row">
|
||||
<Container className="flex-fill border d-flex flex-column">
|
||||
<Row className="justify-content-center my-2">
|
||||
<HCard title="Test" content="Hello"></HCard>
|
||||
</Row>
|
||||
<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">
|
||||
<Plot
|
||||
data={[
|
||||
{
|
||||
x: [1, 2, 3],
|
||||
y: [2, 4, 6],
|
||||
type: 'scatter',
|
||||
mode: 'lines+markers',
|
||||
},
|
||||
]}
|
||||
layout={{ dragmode: "pan", autosize: true }}
|
||||
config={{
|
||||
scrollZoom: true,
|
||||
displayModeBar: false,
|
||||
responsive: true,
|
||||
}}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
</Row>
|
||||
</Container>
|
||||
</Container>
|
||||
<Row className="flex-grow-1 border-top border-bottom">
|
||||
<RPlot />
|
||||
</Row>
|
||||
</Container >
|
||||
)
|
||||
}
|
||||
}
|
||||
|
@ -4,32 +4,16 @@ import { Card, Col, Row } from 'react-bootstrap';
|
||||
|
||||
type CardProps = {
|
||||
title: string,
|
||||
content: string
|
||||
content: string,
|
||||
update: Date
|
||||
}
|
||||
|
||||
type CardState = {
|
||||
lastUpdate: Date
|
||||
}
|
||||
|
||||
class HCard extends Component<CardProps, CardState> {
|
||||
class HCard extends Component<CardProps> {
|
||||
constructor(props: CardProps) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.setState({
|
||||
lastUpdate: new Date()
|
||||
})
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.tick()
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
setInterval(() => this.tick(), 1000)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card bg="light" style={{ minWidth: "15rem" }}>
|
||||
@ -47,7 +31,7 @@ class HCard extends Component<CardProps, CardState> {
|
||||
</Col>
|
||||
</Row>
|
||||
<Card.Text className="border-top text-center">
|
||||
<small className="text-muted my-auto mx-2">Last updated {this.state.lastUpdate.toLocaleTimeString('en-GB')}</small>
|
||||
<small className="text-muted my-auto mx-2">Last updated {this.props.update.toLocaleTimeString('en-GB')}</small>
|
||||
</Card.Text>
|
||||
</Card>);
|
||||
}
|
||||
|
57
websrc/components/RPlot.tsx
Normal file
57
websrc/components/RPlot.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import React from "react"
|
||||
import { Component } from "react"
|
||||
import Plot from "react-plotly.js"
|
||||
|
||||
import { NewTickData, socket } from '../';
|
||||
|
||||
|
||||
|
||||
type PlotState = {
|
||||
x: Array<number>,
|
||||
y: Array<number>
|
||||
}
|
||||
|
||||
class RPlot extends Component<{}, PlotState> {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
state = {
|
||||
x: [],
|
||||
y: []
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
socket.on("new_tick", (data: NewTickData) => {
|
||||
this.setState({
|
||||
x: [...this.state.x, data.tick],
|
||||
y: [...this.state.y, data.price],
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Plot
|
||||
data={[
|
||||
{
|
||||
x: this.state.x,
|
||||
y: this.state.y,
|
||||
type: 'scatter',
|
||||
mode: 'lines+markers',
|
||||
"marker.colorbar": { tickformat: ".1f"}
|
||||
},
|
||||
]}
|
||||
layout={{ dragmode: "pan", autosize: true }}
|
||||
config={{
|
||||
scrollZoom: true,
|
||||
displayModeBar: false,
|
||||
responsive: true,
|
||||
}}
|
||||
style={{ width: '90%', height: '90%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RPlot;
|
49
websrc/components/RToast.tsx
Normal file
49
websrc/components/RToast.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import React, { Component } from 'react';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { Card, Col, Row, Toast } from 'react-bootstrap';
|
||||
import { socket } from "../";
|
||||
|
||||
type ToastProps = {
|
||||
title: string,
|
||||
content?: string,
|
||||
bg?: string
|
||||
}
|
||||
|
||||
type ToastState = {
|
||||
lastUpdated: Date,
|
||||
show: boolean
|
||||
}
|
||||
|
||||
|
||||
export class RToast extends Component<ToastProps, ToastState> {
|
||||
constructor(props: ToastProps) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
state = {
|
||||
lastUpdated: new Date(),
|
||||
show: false
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
socket.on("connect", () => {
|
||||
this.setState({ show: true })
|
||||
})
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.setState({ lastUpdated: new Date() })
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Toast show={this.state.show} delay={5000} autohide>
|
||||
<Toast.Header>
|
||||
<strong className="mr-auto">{this.props.title}</strong>
|
||||
<small>{this.state.lastUpdated.toLocaleTimeString('en-GB')}</small>
|
||||
</Toast.Header>
|
||||
{ this.props.content ? <Toast.Body> {this.props.content}</Toast.Body> : null}
|
||||
</Toast>
|
||||
)
|
||||
}
|
||||
}
|
@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
import { FunctionComponent } from 'react';
|
||||
import { Card, Col, Row, Toast } from 'react-bootstrap';
|
||||
|
||||
type ToastProps = {
|
||||
title: string,
|
||||
content?: string
|
||||
}
|
||||
|
||||
export const FullToast: FunctionComponent<ToastProps> = ({ title, content }) =>
|
||||
<Toast>
|
||||
<Toast.Header>
|
||||
<strong className="mr-auto">{title}</strong>
|
||||
<small>10 mins ago</small>
|
||||
</Toast.Header>
|
||||
<Toast.Body> {content}</Toast.Body>
|
||||
</Toast>
|
||||
|
||||
export const HeaderToast: FunctionComponent<ToastProps> = ({ title }) =>
|
||||
<Toast>
|
||||
<Toast.Header>
|
||||
<strong className="mr-auto">{title}</strong>
|
||||
<small>10 mins ago</small>
|
||||
</Toast.Header>
|
||||
</Toast>
|
||||
|
||||
export default FullToast;
|
@ -4,7 +4,12 @@ import "bootstrap/dist/css/bootstrap.css";
|
||||
import App from "./components/App";
|
||||
import io from "socket.io-client";
|
||||
|
||||
const socket = io();
|
||||
export const socket = io();
|
||||
|
||||
export type NewTickData = {
|
||||
tick: number,
|
||||
price: number
|
||||
}
|
||||
|
||||
socket.on("connect", function () {
|
||||
console.log("Connected!")
|
||||
|
Loading…
Reference in New Issue
Block a user