graph working. old functional components are now standard components

This commit is contained in:
Giulio De Pasquale 2020-12-13 19:32:33 +00:00
parent 035d7831ae
commit 3f09e9fea8
6 changed files with 147 additions and 75 deletions

View File

@ -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>
<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 className="flex-grow-1 border-top border-bottom">
<RPlot />
</Row>
</Container >
</Container>
)
}
}

View File

@ -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>);
}

View 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;

View 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>
)
}
}

View File

@ -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;

View File

@ -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!")