stef_buwalda/dashboard_test
1
0
Fork 0
mirror of https://github.com/StefBuwalda/dashboard_test.git synced 2025-10-31 19:59:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

More chart experimentation. Managed to make a chart of ping history display

Browse Source
This commit is contained in:
Stef
2025-09-05 08:25:51 +02:00
parent 9e4d2e031d
commit cab5c3b7ec
2 changed files with 41 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app.py
View File

@@ -7,6 +7,7 @@ from flask_migrate import upgrade, stamp
from pathlib import Path from pathlib import Path
from models import service, log from models import service, log
from typing import Any, Optional, cast from typing import Any, Optional, cast
import json
# Init and upgrade # Init and upgrade
with app.app_context(): with app.app_context():
@@ -34,12 +35,21 @@ with app.app_context():
@app.route("/") @app.route("/")
def homepage(): def homepage():
return render_template("home.html", services=services) return render_template("home.html")
@app.route("/chart") @app.route("/chart")
def chart(): def chart():
return render_template("chart.html") with app.app_context():
logs = []
s = db.session.query(service).first()
if s:
logs: list[log] = s.logs.limit(60).all()
return render_template(
"chart.html",
dates=[item.dateCreated.isoformat() for item in logs],
values=json.dumps([item.ping for item in logs]),
)
@app.route("/api/status") @app.route("/api/status")

55
mem/templates/chart.html
View File

@@ -1,45 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-bs-theme="dark"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset=" UTF-8"> <meta charset="UTF-8">
<title>Chart</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" <title>Simple Line Chart</title>
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script src="https://www.chartjs.org/docs/latest/samples/utils.js"></script>
</head> </head>
<div class="container-fluid" style="width:900px;"> <body>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id="myChart"></canvas>
</body>
<script> <script>
const ctx = document.getElementById('myChart');
const chartDates = {{ dates| tojson | safe }}.map(dt => new Date(dt));
const data = {
labels: chartDates,
datasets: [{
label: 'Example Data',
data: {{ values }},
}]
};
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, { new Chart(ctx, {
type: 'bar', type: 'line',
data: { data: data,
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: { options: {
scales: { scales: {
y: { x: {
beginAtZero: true type: 'time', // Important for datetime axis
time: {
unit: 'day'
}
} }
} }
} }
}); });
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
</html> </html>