1
0
Fork 1
mirror of https://gitlab.com/mangadex-pub/mangadex_at_home.git synced 2024-01-19 02:48:37 +00:00

charts maybe?

This commit is contained in:
M 2020-06-13 15:26:04 -05:00
parent 1098664814
commit 9fe15a8afa
3 changed files with 163 additions and 17 deletions

View file

@ -12,6 +12,10 @@ let lockDash;
//non-option var
let statRequest;
//stat vars
let hitmiss,
byte,
cached,
req;
//dockable things
let config = {
@ -113,7 +117,7 @@ function loadDash() {
if (savedState !== null) {
dashlayout = new GoldenLayout(JSON.parse(savedState), $("#dashboard"));
} else {
dashlayout = new GoldenLayout(config, $("#dashboard"));
dashlayout = new GoldenLayout(config, $("#dashboard"));
}
//graphs
dashlayout.registerComponent('Network Utilization', function (container, state) {
@ -180,12 +184,102 @@ jQuery(document).ready(function () {
$(this).text("");
$('#console_text').scrollTop($("#console_text")[0].scrollHeight)
}
})
statRequest = setInterval(function () {
requestStats();
}, refreshRate);
});
loadStuff();
fetch("/api/allStats")
.then(response => async function () {
let respj = JSON.parse(await response.text());
updateValues(respj);
console.log(respj);
});
statRequest = setInterval(getStats, refreshRate);
});
function loadStuff() {
hitmiss = new Chart(document.getElementById('hitpie').getContext('2d'), {
type: 'doughnut',
data: {
datasets: [{
data: [0, 0]
}],
labels: [
'Hits',
'Misses'
]
},
options: {}
});
req = new Chart(document.getElementById('requestsserved').getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Requests Served',
backgroundColor: "#f00",
borderColor: "#f00",
data: [],
fill: false
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
byte = new Chart(document.getElementById('bytessent').getContext('2d'), {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: 'Bytes Sent',
backgroundColor: "#f00",
borderColor: "#f00",
data: [36, 98, 45, 67],
fill: false
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
cached = new Chart(document.getElementById('browsercached').getContext('2d'), {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
label: 'Cached',
backgroundColor: "#f00",
borderColor: "#f00",
data: [36, 98, 45, 67],
fill: false
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
//site functions, no connections involved
$(window).on("click", function () {
@ -491,17 +585,51 @@ function updateWithMessage(m) {
function getStats() {
fetch("/api/stats")
.then(response => parseResponse(response));
.then(response => async function () {
let respj = JSON.parse(await response.text());
parseResponse(respj);
console.log(respj);
});
//TODO: use values and update web info
}
function parseResponse(x) {
let respj = JSON.parse(x);
console.log(x);
hitmiss.data.datasets[0].data[0] = (x.cache_hits);
hitmiss.data.datasets[0].data[1] = (x.misses);
req.data.labels.push(x.snap_time);
req.data.datasets.forEach((dataset) => {
dataset.data.push(x.requests_served);
});
byte.data.labels.push(x.snap_time);
byte.data.datasets.forEach((dataset) => {
dataset.data.push(x.bytes_sent);
});
cached.data.labels.push(x.snap_time);
cached.data.datasets.forEach((dataset) => {
dataset.data.push(x.browser_cached);
});
}
function updateValues() {
function updateValues(data) {
for (let key in data) {
if (data.hasOwnProperty(key)) {
let x = data[key];
hitmiss.data.datasets[0].data[0] = (x.cache_hits);
hitmiss.data.datasets[0].data[1] = (x.misses);
req.data.labels.push(key);
req.data.datasets.forEach((dataset) => {
dataset.data.push(x.requests_served);
});
byte.data.labels.push(key);
byte.data.datasets.forEach((dataset) => {
dataset.data.push(x.bytes_sent);
});
cached.data.labels.push(key);
cached.data.datasets.forEach((dataset) => {
dataset.data.push(x.browser_cached);
});
}
}
}
//console functions

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>MD@H Client</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<script src="dataReceive.js"></script>
<link rel="stylesheet" type="text/css" href="layout.css">
@ -43,13 +44,30 @@
</div>
</div>
<div id="content">
<div id="dashb" class="content">
<div id="dashb" class="content" style="overflow-y: scroll">
<div class="contentHeader">
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
</div>
<div id="dashboard"></div>
<div id="gDat" hidden>
<div id="dashboard" hidden></div>
<div id="pleasejustwork" style="height: calc(100% - 140px); width: calc(100% - 40px); margin: 20px">
<div id="thelonelynumber" style="position: absolute; width: 30%; margin: 20px;">
<div class="line_graph_data">
<canvas id="hitpie"></canvas>
</div>
</div>
<div id="thegraphfamily"
style="position: absolute; width: calc(70% - 80px); margin: 20px; left: calc(30% + 40px); top: 100px">
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
<canvas id="bytessent" style="height: 250px"></canvas>
</div>
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
<canvas id="requestsserved" style="height: 250px"></canvas>
</div>
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
<canvas id="browsercached" style="height: 250px"></canvas>
</div>
</div>
</div>
</div>
<div id="console" class="content" hidden>

View file

@ -145,10 +145,10 @@ body {
overflow-y: scroll;
}
.line_graph_data {
height: 100%;
width: 100%;
}
/*.line_graph_data {*/
/* height: 100%;*/
/* width: 100%;*/
/*}*/
/*Console and options positions*/