Added graphs for ping/dl/up

package-lock.json

@@ -2299,6 +2299,32 @@
             "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
             "dev": true
         },
+        "chart.js": {
+            "version": "2.9.3",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+            "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+            "requires": {
+                "chartjs-color": "^2.1.0",
+                "moment": "^2.10.2"
+            }
+        },
+        "chartjs-color": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+            "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+            "requires": {
+                "chartjs-color-string": "^0.6.0",
+                "color-convert": "^1.9.3"
+            }
+        },
+        "chartjs-color-string": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+            "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+            "requires": {
+                "color-name": "^1.0.0"
+            }
+        },
         "chokidar": {
             "version": "2.1.8",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -6351,6 +6377,11 @@
                 "minimist": "^1.2.5"
             }
         },
+        "moment": {
+            "version": "2.24.0",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+            "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+        },
         "move-concurrently": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7997,6 +8028,15 @@
                 "warning": "^4.0.3"
             }
         },
+        "react-chartjs-2": {
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
+            "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
+            "requires": {
+                "lodash": "^4.17.4",
+                "prop-types": "^15.5.8"
+            }
+        },
         "react-dom": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",

package.json

@@ -26,7 +26,9 @@
     },
     "dependencies": {
         "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "chart.js": "^2.9.3",
         "react-bootstrap": "^1.0.0",
+        "react-chartjs-2": "^2.9.0",
         "react-router": "^5.1.2",
         "react-router-dom": "^5.1.2",
         "react-toastify": "^5.5.0"

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

resources/js/index.js

@@ -53,6 +53,7 @@ export default class Index extends Component {
                 user: resp.data,
                 loading: false,
                 redirectLogin: false,
+                token: token
             });
             if(reload) {
                 this.setState({