Mystiatech/Ruby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed loss to a graph instead

Browse Source
This commit is contained in:
Dani 2025-04-27 12:02:44 -04:00
parent 19cac46c0c
commit 8af477957c
1 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
dashboard/templates/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="refresh" content="30"> <meta http-equiv="refresh" content="30">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<title>Ruby's Dashboard</title> <title>Ruby's Dashboard</title>
<style> <style>
body { body {
@ -95,12 +96,54 @@
<div class="section"> <div class="section">
<h2>📉 Recent Loss</h2> <h2>📉 Recent Loss</h2>
<ul> <canvas id="lossChart" width="400" height="200"></canvas>
{% for loss in loss_data[-10:]|reverse %}
<li>{{ loss }}</li>
{% endfor %}
</ul>
</div> </div>
<script>
const ctxLoss = document.getElementById('lossChart').getContext('2d');
const lossData = {
labels: [
{% for entry in loss_data[-50:] %}
"{{ loop.index0 }}",
{% endfor %}
],
datasets: [{
label: 'Loss',
data: [
{% for entry in loss_data[-50:] %}
{{ entry }},
{% endfor %}
],
fill: false,
borderColor: 'rgb(255, 99, 132)',
tension: 0.2
}]
};
const lossChart = new Chart(ctxLoss, {
type: 'line',
data: lossData,
options: {
scales: {
x: {
display: false // hide x-axis ticks
},
y: {
title: {
display: true,
text: 'Loss Value'
},
beginAtZero: false
}
},
plugins: {
legend: {
display: false
}
}
}
});
</script>
</body> </body>
</html> </html>