mirror of
https://github.com/henrywhitaker3/Speedtest-Tracker.git
synced 2025-12-21 13:23:04 +01:00
Added graphs for ping/dl/up
This commit is contained in:
Henry Whitaker
40
package-lock.json
generated
40
package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
39220
public/js/app.js
vendored
39220
public/js/app.js
vendored
File diff suppressed because it is too large
Load Diff
142
resources/js/components/Graphics/HistoryGraph.js
vendored
Normal file
142
resources/js/components/Graphics/HistoryGraph.js
vendored
Normal file
@@ -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'));
|
||||
}
|
||||
7
resources/js/components/Home/HomePage.js
vendored
7
resources/js/components/Home/HomePage.js
vendored
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
1
resources/js/index.js
vendored
1
resources/js/index.js
vendored
@@ -53,6 +53,7 @@ export default class Index extends Component {
|
||||
user: resp.data,
|
||||
loading: false,
|
||||
redirectLogin: false,
|
||||
token: token
|
||||
});
|
||||
if(reload) {
|
||||
this.setState({
|
||||
|
||||
Reference in New Issue
Block a user