Added graphs for ping/dl/up

resources/js/components/Graphics/HistoryGraph.js

@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import { Spinner } from 'react-bootstrap';
+import { Line } from 'react-chartjs-2';
+
+export default class HistoryGraph extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            days: 30,
+            token: this.props.token,
+            duData: {},
+            duOptions: {},
+            pingData: {},
+            pingOptions: {},
+            loading: true,
+        }
+    }
+
+    componentDidMount = () => {
+        this.getData()
+    }
+
+    getData = (days = this.state.days) => {
+        var url = '/api/speedtest/time/' + days + '?token=' + this.state.token.access_token;
+
+        Axios.get(url)
+        .then((resp) => {
+            var duData = {
+                labels: [],
+                datasets:[
+                    {
+                        data: [],
+                        label: 'Download',
+                        borderColor: "#fca503",
+                        fill: false,
+                    },
+                    {
+                        data: [],
+                        label: 'Upload',
+                        borderColor: "#3e95cd",
+                        fill: false,
+                    }
+                ],
+            };
+            var duOptions = {
+                tooltips: {
+                    callbacks: {
+                      label: (item) => `${item.yLabel} Mbit/s`,
+                    },
+                },
+                title: {
+                    display: true,
+                    text: 'Speedtests results for the last ' + days + ' days',
+                },
+            };
+
+            var pingData = {
+                labels: [],
+                datasets:[
+                    {
+                        data: [],
+                        label: 'Ping',
+                        borderColor: "#07db71",
+                        fill: false,
+                    },
+                ],
+            };
+            var pingOptions = {
+                tooltips: {
+                    callbacks: {
+                      label: (item) => `${item.yLabel} ms`,
+                    },
+                },
+                title: {
+                    display: true,
+                    text: 'Ping results for the last ' + days + ' days',
+                },
+            }
+
+            resp.data.data.forEach(e => {
+                var download = {
+                    t: new Date(e.created_at),
+                    y: e.download,
+                };
+                var upload = {
+                    t: new Date(e.created_at),
+                    y: e.upload,
+                };
+                var ping = {
+                    t: new Date(e.created_at),
+                    y: parseFloat(e.ping)
+                }
+                duData.datasets[0].data.push(download);
+                duData.datasets[1].data.push(upload);
+                pingData.datasets[0].data.push(ping);
+                duData.labels.push(new Date(e.created_at).toLocaleDateString());
+                pingData.labels.push(new Date(e.created_at).toLocaleDateString());
+            });
+
+            this.setState({
+                duData: duData,
+                duOptions: duOptions,
+                pingData: pingData,
+                pingOptions: pingOptions,
+                loading: false,
+            });
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        var loading = this.state.loading;
+        var duData = this.state.duData;
+        var duOptions = this.state.duOptions;
+        var pingData = this.state.pingData;
+        var pingOptions = this.state.pingOptions;
+
+        if(loading) {
+            return (
+                <div>
+                    <Spinner animation="grow" />
+                </div>
+            )
+        } else {
+            return (
+                <div>
+                    <Line data={duData} options={duOptions} />
+                    <Line data={pingData} options={pingOptions} />
+                </div>
+            );
+        }
+    }
+}
+
+if (document.getElementById('HistoryGraph')) {
+    ReactDOM.render(<HistoryGraph />, document.getElementById('HistoryGraph'));
+}

resources/js/components/Home/HomePage.js

@@ -1,19 +1,22 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import HistoryGraph from '../Graphics/HistoryGraph';
 
 export default class HomePage extends Component {
     constructor(props) {
         super(props)
 
         this.state = {
-
+            token: this.props.token,
         }
     }
 
     render() {
+        var token = this.state.token;
+
         return (
             <div>
-                Homepage coming soon...
+                <HistoryGraph token={token} />
             </div>
         );
     }