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 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 Plot from "react-plotly.js";
|
||||||
import HCard from "./HCard";
|
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 {
|
class App extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Container className="flex-fill flex-row">
|
<Container className="flex-fill border d-flex flex-column">
|
||||||
<Container className="flex-fill border d-flex flex-column">
|
<Row className="justify-content-center my-2">
|
||||||
<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="Test" content="Hello"></HCard>
|
<HCard title="Current price:" content={String(this.state.current_price)} update={this.state.last_update}></HCard>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
<Row className="flex-grow-1 border-top">
|
<Row className="flex-grow-1 border-top border-bottom">
|
||||||
<Plot
|
<RPlot />
|
||||||
data={[
|
</Row>
|
||||||
{
|
</Container >
|
||||||
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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,32 +4,16 @@ import { Card, Col, Row } from 'react-bootstrap';
|
|||||||
|
|
||||||
type CardProps = {
|
type CardProps = {
|
||||||
title: string,
|
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) {
|
constructor(props: CardProps) {
|
||||||
super(props)
|
super(props)
|
||||||
}
|
}
|
||||||
|
|
||||||
tick() {
|
|
||||||
this.setState({
|
|
||||||
lastUpdate: new Date()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
this.tick()
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
setInterval(() => this.tick(), 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Card bg="light" style={{ minWidth: "15rem" }}>
|
<Card bg="light" style={{ minWidth: "15rem" }}>
|
||||||
@ -47,7 +31,7 @@ class HCard extends Component<CardProps, CardState> {
|
|||||||
</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.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.Text>
|
||||||
</Card>);
|
</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 App from "./components/App";
|
||||||
import io from "socket.io-client";
|
import io from "socket.io-client";
|
||||||
|
|
||||||
const socket = io();
|
export const socket = io();
|
||||||
|
|
||||||
|
export type NewTickData = {
|
||||||
|
tick: number,
|
||||||
|
price: number
|
||||||
|
}
|
||||||
|
|
||||||
socket.on("connect", function () {
|
socket.on("connect", function () {
|
||||||
console.log("Connected!")
|
console.log("Connected!")
|
||||||
|
Loading…
Reference in New Issue
Block a user