mirrors/Speedtest-Tracker
1
0
Fork 0
mirror of https://github.com/henrywhitaker3/Speedtest-Tracker.git synced 2025-12-24 06:28:27 +01:00
Code Issues Projects Releases Wiki Activity

Added widget for last result

Browse Source
This commit is contained in:
Henry Whitaker
2020-04-08 17:20:09 +01:00
parent c99ffa535b
commit 170c9ab446
370 changed files with 14391 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
resources/js/components/Graphics/HistoryGraph.js vendored
View File

@@ -1,8 +1,9 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Axios from 'axios';
import { Spinner } from 'react-bootstrap';
import { Spinner, Container, Row, Form, Card } from 'react-bootstrap';
import { Line } from 'react-chartjs-2';
import { Col } from 'react-bootstrap';
export default class HistoryGraph extends Component {
constructor(props) {
@@ -16,11 +17,16 @@ export default class HistoryGraph extends Component {
pingData: {},
pingOptions: {},
loading: true,
interval: null,
}
}
componentDidMount = () => {
this.getData()
this.getData();
var int = setInterval(this.getData, 10000);
this.setState({
interval: int,
});
}
getData = (days = this.state.days) => {
@@ -52,7 +58,7 @@ export default class HistoryGraph extends Component {
},
},
title: {
display: true,
display: false,
text: 'Speedtests results for the last ' + days + ' days',
},
};
@@ -75,7 +81,7 @@ export default class HistoryGraph extends Component {
},
},
title: {
display: true,
display: false,
text: 'Ping results for the last ' + days + ' days',
},
}
@@ -119,6 +125,7 @@ export default class HistoryGraph extends Component {
var duOptions = this.state.duOptions;
var pingData = this.state.pingData;
var pingOptions = this.state.pingOptions;
var days = this.state.days;
if(loading) {
return (
@@ -128,10 +135,46 @@ export default class HistoryGraph extends Component {
)
} else {
return (
<div>
<Line data={duData} options={duOptions} />
<Line data={pingData} options={pingOptions} />
</div>
<Container className="my-4" fluid>
<Row>
<Col sm={{ span: 12 }}>
<div className="text-center">
<h4 className="d-inline">Show results for the last</h4>
<Form.Control id="duDaysInput" className="d-inline mx-2" defaultValue={days}></Form.Control>
<h4 className="d-inline">days</h4>
<p className="text-muted">This data refreshes every 10 seconds</p>
</div>
</Col>
</Row>
<Row>
<Col
lg={{ span: 6 }}
md={{ span: 12 }}
sm={{ span: 12 }}
xs={{ span: 12 }}
className="my-2"
>
<Card className="shadow-sm">
<Card.Body>
<Line data={duData} options={duOptions} />
</Card.Body>
</Card>
</Col>
<Col
lg={{ span: 6 }}
md={{ span: 12 }}
sm={{ span: 12 }}
xs={{ span: 12 }}
className="my-2"
>
<Card className="shadow-sm">
<Card.Body>
<Line data={pingData} options={pingOptions} />
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}
}