monthly update

frontend/src/components/StackableInput.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {
+    InputGroup,
+    FormControl,
+    Button,
+    ProgressBar
+} from "react-bootstrap";
+
+export function StackableInput(props: any) {
+    return (
+        <React.Fragment>
+            <InputGroup className="mt-5">
+                <FormControl
+                    className="url-input"
+                    placeholder="YouTube or other supported service video url"
+                    onChange={props.handleUrlChange}
+                />
+            </InputGroup>
+
+            <div className="mt-2 status-box">
+                <h6>Status</h6>
+                <pre id='status'>{props.message}</pre>
+            </div>
+
+            {props.progress ?
+                <ProgressBar className="container-padding" now={props.progress} variant="danger" /> :
+                null
+            }
+
+            {/* <Button className="my-5" variant="danger" onClick={() => sendUrl()} disabled={props.halt}>Go!</Button>{' '} */}
+            {/* <Button variant="danger" active onClick={() => abort()}>Abort</Button>{' '} */}
+        </React.Fragment>
+    )
+}

frontend/src/components/Statistics.tsx

@@ -1,12 +1,52 @@
-import React, { useState } from "react";
-import { IDLSpeed } from "../interfaces";
+import React, { useEffect, useRef, useState } from "react";
+import { Line } from "react-chartjs-2";
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,
+} from 'chart.js';
+import { on } from "../events";
 
-export function Statistics(props: any) {
-    const [dataset, setDataset] = useState<Array<IDLSpeed>>()
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+export function Statistics() {
+    const dataset = new Array<number>();
+    const chartRef = useRef(null)
+
+    useEffect(() => {
+        on('dlSpeed', (data: CustomEvent<any>) => {
+            dataset.push(data.detail)
+            chartRef.current.update()
+        })
+    }, [])
+
+    const data = {
+        labels: dataset.map(() => ''),
+        datasets: [
+            {
+                data: dataset,
+                label: 'download speed',
+                borderColor: 'rgb(53, 162, 235)',
+            }
+        ]
+    }
 
     return (
         <div className="chart">
-
+            <Line data={data} ref={chartRef} />
         </div>
     )
 }