kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-06 16:00:28 +01:00
Code

Fixed chart and updated requirement.txt

Browse Source
This commit is contained in:
Donald Cheng Hong Zou 2022-03-04 08:28:54 -05:00
parent 8fe8209580
commit 7e1fd99c37
4 changed files with 62 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/requirements.txt
View File

@ -4,3 +4,4 @@ icmplib
flask-qrcode
gunicorn
certbot
flask-socketio

22
src/static/css/dashboard.css
View File

@ -598,3 +598,25 @@ pre.index-alert{
line-height: 1;
margin-right: 0.5rem;
}
.chartContainer.fullScreen{
position: fixed;
z-index: 9999;
background-color: white;
top: 0;
left: 0;
width: calc( 100% + 15px );
height: 100%;
padding: 32px;
}
.chartContainer.fullScreen .col-sm{
padding-right: 0;
height: 100%;
}
.chartContainer.fullScreen .chartCanvasContainer{
width: 100%;
height: calc( 100% - 47px ) !important;
max-height: calc( 100% - 47px ) !important;
}

2
src/static/css/dashboard.min.css vendored
View File

File diff suppressed because one or more lines are too long

54
src/templates/configuration.html
View File

@ -74,7 +74,7 @@
</div>
</div>
<hr>
<div class="row">
<div class="row chartContainer">
<div class="col-sm">
<div class="chartTitle">
<h6>Data Usage / Refresh Interval</h6>
@ -83,10 +83,11 @@
<button class="btn btn-outline-primary btn-sm switchUnit active" data-unit="GB">GB</button>
<button class="btn btn-outline-primary btn-sm switchUnit" data-unit="MB">MB</button>
<button class="btn btn-outline-primary btn-sm switchUnit" data-unit="KB">KB</button>
<button class="btn btn-outline-primary btn-sm fullScreen"><i class="bi bi-fullscreen"></i></button>
</div>
</div>
</div>
<div style="width: 100%; max-height: 300px">
<div class="chartCanvasContainer" style="width: 100%; height: 300px">
<canvas id="myChart" width="100" height="100"></canvas>
</div>
</div>
@ -453,31 +454,46 @@
labels: [],
datasets: [
{
label: 'Total Sent',
data: [],
fill: false,
borderColor: '#28a745',
tension: 0.1,
borderWidth: 1
},{
label: 'Total Received',
data: [],
fill: false,
borderColor: '#007bff',
tension: 0.1,
borderWidth: 1
}]
label: 'Data Sent',
data: [],
stroke: '#FFFFFF',
borderColor: '#28a745',
tension: 0.1,
borderWidth: 2
},
{
label: 'Data Received',
data: [],
stroke: '#FFFFFF',
borderColor: '#007bff',
tension: 0.1,
borderWidth: 2
}
]
},
options: {
maintainAspectRatio: false,
showScale: false,
responsive:false,
scales: {
y: {
min: 0,
ticks: {
min: 0,
callback: function(value, index, ticks) {
return `${value} ${chartUnit}`
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.parsed.y} ${chartUnit}`
}
}
}
}
}
});
@ -485,10 +501,13 @@
totalDataUsageChartObj.width = $("#myChart").parent().width();
totalDataUsageChartObj.resize();
$(window).on("resize", function() {
totalDataUsageChartObj.width = $("#myChart").parent().width();
totalDataUsageChartObj.resize();
});
$(".fullScreen").on("click", function(){
$(".chartContainer").addClass("fullScreen");
totalDataUsageChartObj.resize();
});
let mul = 1;
@ -527,7 +546,6 @@
chartUnit = $(this).data('unit');
totalDataUsageChartObj.data.datasets[0].data = totalDataUsageChartObj.data.datasets[0].data.map(x => x * mul);
totalDataUsageChartObj.data.datasets[1].data = totalDataUsageChartObj.data.datasets[1].data.map(x => x * mul);
totalDataUsageChartObj.update();
}