graph working. old functional components are now standard components

websrc/components/App.tsx

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

websrc/components/HCard.tsx

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

websrc/components/RPlot.tsx

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

websrc/components/RToast.tsx

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

websrc/components/Toasts.tsx

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

websrc/index.tsx

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