mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-06 07:50:13 +01:00
Fixed chart and updated requirement.txt
This commit is contained in:
parent
8fe8209580
commit
7e1fd99c37
@ -3,4 +3,5 @@ ifcfg
|
||||
icmplib
|
||||
flask-qrcode
|
||||
gunicorn
|
||||
certbot
|
||||
certbot
|
||||
flask-socketio
|
@ -597,4 +597,26 @@ pre.index-alert{
|
||||
margin-bottom: 0;
|
||||
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
2
src/static/css/dashboard.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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();
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user