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 flask-qrcode
gunicorn gunicorn
certbot certbot
flask-socketio

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

@ -598,3 +598,25 @@ pre.index-alert{
line-height: 1; line-height: 1;
margin-right: 0.5rem; 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>
</div> </div>
<hr> <hr>
<div class="row"> <div class="row chartContainer">
<div class="col-sm"> <div class="col-sm">
<div class="chartTitle"> <div class="chartTitle">
<h6>Data Usage / Refresh Interval</h6> <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 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="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 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>
</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> <canvas id="myChart" width="100" height="100"></canvas>
</div> </div>
</div> </div>
@ -453,31 +454,46 @@
labels: [], labels: [],
datasets: [ datasets: [
{ {
label: 'Total Sent', label: 'Data Sent',
data: [], data: [],
fill: false, stroke: '#FFFFFF',
borderColor: '#28a745', borderColor: '#28a745',
tension: 0.1, tension: 0.1,
borderWidth: 1 borderWidth: 2
},{ },
label: 'Total Received', {
data: [], label: 'Data Received',
fill: false, data: [],
borderColor: '#007bff', stroke: '#FFFFFF',
tension: 0.1, borderColor: '#007bff',
borderWidth: 1 tension: 0.1,
}] borderWidth: 2
}
]
}, },
options: { options: {
maintainAspectRatio: false,
showScale: false,
responsive:false, responsive:false,
scales: { scales: {
y: { y: {
min: 0,
ticks: { ticks: {
min: 0,
callback: function(value, index, ticks) { callback: function(value, index, ticks) {
return `${value} ${chartUnit}` 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.width = $("#myChart").parent().width();
totalDataUsageChartObj.resize(); totalDataUsageChartObj.resize();
$(window).on("resize", function() { $(window).on("resize", function() {
totalDataUsageChartObj.width = $("#myChart").parent().width();
totalDataUsageChartObj.resize(); totalDataUsageChartObj.resize();
}); });
$(".fullScreen").on("click", function(){
$(".chartContainer").addClass("fullScreen");
totalDataUsageChartObj.resize();
});
let mul = 1; let mul = 1;
@ -527,7 +546,6 @@
chartUnit = $(this).data('unit'); chartUnit = $(this).data('unit');
totalDataUsageChartObj.data.datasets[0].data = totalDataUsageChartObj.data.datasets[0].data.map(x => x * mul); 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.data.datasets[1].data = totalDataUsageChartObj.data.datasets[1].data.map(x => x * mul);
totalDataUsageChartObj.update(); totalDataUsageChartObj.update();
} }