pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

live updating admin graph

Browse Source
This commit is contained in:
Wim Brand
2020-06-08 16:17:25 +02:00
parent 522ac9d345
commit 4a7a60f5d2
2 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
res/include/script/admin.js
View File

@@ -83,10 +83,16 @@ var graph = new Chart(
} }
); );
function setData(days, interval){ let graphTimeout = null;
function loadGraph(minutes, interval, live){
if (graphTimeout !== null) { clearTimeout(graphTimeout) }
if (live) {
graphTimeout = setTimeout(() => {loadGraph(60, 1, true)}, 3000)
}
let today = new Date() let today = new Date()
let start = new Date() let start = new Date()
start.setDate(start.getDate()-days) start.setMinutes(start.getMinutes()-minutes)
fetch( fetch(
apiEndpoint+"/admin/files/timeseries" + apiEndpoint+"/admin/files/timeseries" +
@@ -107,7 +113,8 @@ function setData(days, interval){
alert("Error requesting time series: "+e); alert("Error requesting time series: "+e);
}) })
} }
setData(7, 60);
loadGraph(60, 1, true);
// Load performance statistics // Load performance statistics

17
res/template/admin.html
View File

@@ -12,14 +12,15 @@
{{if $isAdmin}} {{if $isAdmin}}
<h3>Bandwidth and views</h3> <h3>Bandwidth and views</h3>
<div class="highlight_dark"> <div class="highlight_dark">
<button onclick="setData(7, 60);">Week</button> <button onclick="loadGraph(60, 1, true);">Live</button>
<button onclick="setData(14, 60);">Two Weeks</button> <button onclick="loadGraph(420, 60, false);">Week</button>
<button onclick="setData(21, 60);">Three Weeks</button> <button onclick="loadGraph(840, 60, false);">Two Weeks</button>
<button onclick="setData(30, 1440);">Month</button> <button onclick="loadGraph(1260, 60, false);">Three Weeks</button>
<button onclick="setData(60, 1440);">Two Months</button> <button onclick="loadGraph(1800, 1440, false);">Month</button>
<button onclick="setData(91, 1440);">Quarter</button> <button onclick="loadGraph(3600, 1440, false);">Two Months</button>
<button onclick="setData(182, 1440);">Half-year</button> <button onclick="loadGraph(5460, 1440, false);">Quarter</button>
<button onclick="setData(356, 1440);">Year</button> <button onclick="loadGraph(10920, 1440, false);">Half-year</button>
<button onclick="loadGraph(21900, 1440, false);">Year</button>
</div> </div>
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: 400px;"> <div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: 400px;">
<canvas id="bandwidth_chart"></canvas> <canvas id="bandwidth_chart"></canvas>