mirror of
https://github.com/amark/gun.git
synced 2025-05-28 09:46:51 +00:00
98 lines
3.3 KiB
HTML
98 lines
3.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
font-family: helvetica;
|
|
background-color: rgb(25,25,25);
|
|
color: rgb(80,135,25) !important;
|
|
text-shadow: 1px 1px 20px rgb(80,150,25);
|
|
}
|
|
|
|
.label {
|
|
position: absolute;
|
|
left: 0.5em;
|
|
top: 1.75em;
|
|
}
|
|
|
|
.input {
|
|
height: 30px;
|
|
padding:10px;
|
|
background-color: rgb(50,50,50);
|
|
color: rgb(250,50,50);
|
|
}
|
|
|
|
.tall { height: 5em; }
|
|
</style>
|
|
|
|
<div class="center"><span class="shout" id="peers">0</span> peers <span class="shout" id="time">0</span> min <span class="shout" id="nodes">0</span> nodes <span class="shout" id="hours">0</span> hours</div>
|
|
|
|
<input id="url" class="center input crack" placeholder="enter peer stats source url">
|
|
|
|
<div class="center row charts">
|
|
</div>
|
|
|
|
<div class="model none">
|
|
<div class="chart"><span class="label"></span><canvas class="tall row"></canvas></div>
|
|
</div>
|
|
|
|
|
|
<script src="./jquery.js"></script>
|
|
<script src="./smoothie.js" charset="utf-8"></script>
|
|
<script>
|
|
var fetchData = async function(){
|
|
// fetch the data from server
|
|
var data = await (await fetch(url.value||(location.origin+'/gun/stats.radata'), {method: 'GET',mode: 'cors'})).json();
|
|
$('#peers').text(data.peers.count);
|
|
$('#time').text((data.peers.time / 1000 / 60).toFixed(0));
|
|
$('#nodes').text(data.node.count);
|
|
$('#hours').text((data.up.time / 60 / 60).toFixed(0));
|
|
|
|
Stats('memory').line.append(+new Date, data.memory.heapTotal / 1024 / 1024);
|
|
try{ Stats('dam # in').line.append(+new Date, data.dam.in.count); }catch(e){}
|
|
try{ Stats('dam in MB').line.append(+new Date, data.dam.in.done / 1024 / 1024); }catch(e){}
|
|
try{ Stats('dam # out').line.append(+new Date, data.dam.out.count); }catch(e){}
|
|
try{ Stats('dam out MB').line.append(+new Date, data.dam.out.done / 1024 / 1024); }catch(e){}
|
|
|
|
console.log('data',data);
|
|
//fetch keys in all, these may be dynamically changing
|
|
//for each key, check if we already have created a time series, if not, create it and add it
|
|
// to the chart corredsponding to the unit of measure
|
|
$.each(data.all, function(key, arr){
|
|
var chart = Stats(key);
|
|
// get data and append to line
|
|
// get the arrays inside the key
|
|
//for each array append the data to the line
|
|
for(var i in arr) {
|
|
// append data [timestamp], [data]
|
|
chart.line.append(arr[i][0], arr[i][1]);
|
|
}
|
|
})
|
|
}
|
|
setInterval(fetchData, 15 * 1000);
|
|
fetchData();
|
|
|
|
function Stats(key, chart){
|
|
// if we have already created, get data to append to it.
|
|
if(chart = Stats[key]){
|
|
return chart;
|
|
}
|
|
// create a new Series for this key
|
|
// add it into the map
|
|
chart = Stats[key] = new SmoothieChart({responsive: true, minValue: 0, grid:{strokeStyle:'rgba(100%,100%,100%,0.2)'},labels:{fontSize:20}});
|
|
chart.line = new TimeSeries();
|
|
chart.addTimeSeries(chart.line,{ strokeStyle:'rgb('+Math.random()*255+', '+Math.random()*255+','+Math.random()*255+')', lineWidth:5 });
|
|
chart.canvas = $('.model').find('.chart').clone(true).appendTo('.charts');
|
|
chart.canvas.find('span').text(key);
|
|
chart.streamTo(chart.canvas.find('canvas').get(0), 15 * 1000);
|
|
// check first two characters of key to determine other charts to add this in
|
|
// tbd later
|
|
return chart;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |