Kezdőlap Felfedezés Súgó
Bejelentkezés
sdk3
/
livecodingspace-db
2
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

add stats from gundb

Nikolay Suslov 5 éve
szülő
7cd1d74174
commit
93a4948d3c
4 módosított fájl, 461 hozzáadás és 0 törlés
Egyesített Nézet Diff Statisztika Mutatása
  1. 1 0
      index.html
  2. 1 0
      stats/jquery.js
  3. 143 0
      stats/stats.html
  4. 316 0
      stats/style.css

+ 1 - 0
index.html
Fájl Megtekintése 

@@ -0,0 +1 @@
 
+<span> GunDB version: 0.2019.612 </span>

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 1 - 0
stats/jquery.js


+ 143 - 0
stats/stats.html
Fájl Megtekintése 

@@ -0,0 +1,143 @@
 
+<!DOCTYPE HTML>
 
+<html>
 
+<head>
 
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
+<link rel="stylesheet" type="text/css" href="./style.css">
 
+</head>
 
+<body>
 
+<style>
 
+	@import url('https://fonts.googleapis.com/css?family=Oxygen');
 
+	html, body {
 
+		font-family: "Oxygen", sans-serif;
 
+	}
 
+	svg, .ct-chart * {
 
+		overflow: visible;
 
+	}
 
+	.ct-series-a .ct-line,
 
+	.ct-series-a .ct-point {
 
+	  stroke: blue !important;
 
+	}
 
+
 
+	.ct-series-b .ct-line,
 
+	.ct-series-b .ct-point {
 
+	  stroke: green !important;
 
+	}
 
+
 
+	.tall { height: 10em; }
 
+</style>
 
+
 
+<input id="url" class="center none" placeholder="enter peer stats source url">
 
+
 
+<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>
 
+
 
+<div class="leak" style="padding: 0 2em;">
 
+	<div class="leak ct-mem ct-chart ct-perfect-fourth tall"></div>
 
+</div>
 
+
 
+<div class="center leak" style="padding: 0 2em;">
 
+	<div class="unit col leak ct-damc ct-chart tall" style="width: 49%;"></div>
 
+	<div class="unit col leak ct-damd ct-chart tall" style="width: 49%;"></div>
 
+</div>
 
+
 
+<div class="center leak" style="padding: 0 2em;">
 
+	<div class="unit col leak ct-radc ct-chart tall" style="width: 49%;"></div>
 
+	<div class="unit col leak ct-radt ct-chart tall" style="width: 49%;"></div>
 
+</div>
 
+<div class="center"><span id="rerr"></span></div>
 
+
 
+<div class="center leak" style="padding: 0 2em;">
 
+	<div class="leak ct-cpu ct-chart ct-perfect-fourth tall"></div>
 
+</div>
 
+
 
+<script src="./jquery.js"></script>
 
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
 
+<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
 
+<script>
 
+var stats = {slide: [0,0,0,0,0], din: [0,0,0,0,0], dout: [0,0,0,0,0], dind: [0,0,0,0,0], doutd: [0,0,0,0,0], rgetc: [0,0,0,0,0], rputc: [0,0,0,0,0]};
 
+setInterval(function(){
 
+	stats.show();
 
+}, 1000 * 15);
 
+stats.show = function(){ $.getJSON(url.value||(location.origin+'/gun/stats.radata'), function(data){ console.log(data);
 
+	$('#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));
 
+
 
+	$('#dinc').text(data.dam.in.count);
 
+	$('#dind').text((data.dam.in.done / 1024 / 1024).toFixed(1));
 
+	$('#doutc').text(data.dam.out.count);
 
+	$('#doutd').text((data.dam.out.done / 1024 / 1024).toFixed(1));
 
+
 
+	stats.slide.push(data.memory.heapTotal / 1024 / 1024); stats.slide = stats.slide.slice(1);
 
+	new Chartist.Line('.ct-mem', {
 
+	  // A labels array that can contain any sort of values
 
+	  labels: ['-1min', '-45s', '-30s', '-15s', '0'],
 
+	  // Our series array that contains series objects or in this case series data arrays
 
+	  series: [stats.slide]
 
+	}, {fullWidth: true, low: 0, axisY: {
 
+    labelInterpolationFnc: function(v) { return v+'MB' }
 
+  }});
 
+
 
+	stats.din.push(data.dam['in'].count); stats.din = stats.din.slice(1);
 
+	stats.dout.push(data.dam.out.count); stats.dout = stats.dout.slice(1);
 
+	new Chartist.Line('.ct-damc', {
 
+	  // A labels array that can contain any sort of values
 
+	  labels: ['-1min', '-45s', '-30s', '-15s', '0'],
 
+	  // Our series array that contains series objects or in this case series data arrays
 
+	  series: [stats.dout, stats.din]
 
+	}, {fullWidth: true, axisY: {
 
+    labelInterpolationFnc: function(v) { return v+'msgs' }
 
+  }});
 
+
 
+	stats.dind.push(data.dam['in'].done / 1024 / 1024); stats.dind = stats.dind.slice(1);
 
+	stats.doutd.push(data.dam.out.done / 1024 / 1024); stats.doutd = stats.doutd.slice(1);
 
+	new Chartist.Line('.ct-damd', {
 
+	  // A labels array that can contain any sort of values
 
+	  labels: ['-1min', '-45s', '-30s', '-15s', '0'],
 
+	  // Our series array that contains series objects or in this case series data arrays
 
+	  series: [stats.doutd, stats.dind]
 
+	}, {fullWidth: true, axisY: {
 
+    labelInterpolationFnc: function(v) { return v+'MB' }
 
+  }});
 
+
 
+	try{ $('#rerr').text(data.rad.put.err || data.rad.get.err) }catch(e){}
 
+
 
+	try{
 
+	stats.rgetc.push(data.rad.get.count); stats.rgetc = stats.rgetc.slice(1);
 
+	stats.rputc.push(data.rad.put.count); stats.rputc = stats.rputc.slice(1);
 
+	new Chartist.Line('.ct-radc', {
 
+	  // A labels array that can contain any sort of values
 
+	  labels: ['-1min', '-45s', '-30s', '-15s', '0'],
 
+	  // Our series array that contains series objects or in this case series data arrays
 
+	  series: [stats.rputc, stats.rgetc]
 
+	}, {fullWidth: true, axisY: {
 
+    labelInterpolationFnc: function(v) { return v+'io' }
 
+  }});
 
+	}catch(e){}
 
+
 
+	try{
 
+	stats.radgt = Object.values(data.rad.get.time).map(function(n){ return n/1000 });
 
+	stats.radpt = Object.values(data.rad.put.time).map(function(n){ return n/1000 });
 
+	new Chartist.Line('.ct-radt', {
 
+	  // A labels array that can contain any sort of values
 
+	  //labels: ['-1min', '-45s', '-30s', '-15s', '0'],
 
+	  // Our series array that contains series objects or in this case series data arrays
 
+	  series: [stats.radpt, stats.radgt]
 
+	}, {fullWidth: true, axisY: {
 
+    labelInterpolationFnc: function(v) { return v+'sec' }
 
+  }});
 
+	}catch(e){}
 
+
 
+	new Chartist.Line('.ct-cpu', {
 
+	  // A labels array that can contain any sort of values
 
+	  labels: ['-15min', '-5min', '1min'],
 
+	  // Our series array that contains series objects or in this case series data arrays
 
+	  series: [data.cpu.loadavg.reverse()]
 
+	}, {fullWidth: true, low: 0, axisY: {
 
+    labelInterpolationFnc: function(v) { return v+'cpu' }
 
+  }});
 
+}) }
 
+stats.show();
 
+</script>
 
+</body>
 
+</html>

+ 316 - 0
stats/style.css
Fájl Megtekintése 

@@ -0,0 +1,316 @@
 
+html, body {
 
+	margin: 0;
 
+	padding: 0;
 
+	position: relative;
 
+  line-height: 1.5;
 
+  font-size: 18pt;
 
+}
 
+
 
+div, ul, ol, li, p, span, form, button, input, textarea, img {
 
+  margin: 0;
 
+  padding: 0;
 
+  position: relative;
 
+  vertical-align: inherit;
 
+  -webkit-transition: all 0.3s;
 
+  transition: all 0.3s;
 
+  box-sizing: border-box;
 
+}
 
+
 
+a, button, input, textarea {
 
+  background: inherit;
 
+  border: inherit;
 
+  color: inherit;
 
+  text-decoration: inherit;
 
+}
 
+
 
+input, textarea {
 
+	width: 100%;
 
+}
 
+
 
+ul, li {
 
+  list-style: none;
 
+}
 
+
 
+[contenteditable=true]:empty:before {
 
+  content: attr(placeholder);
 
+}
 
+
 
+.model, .none { display: none }
 
+.hide { 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 2s;
 
+}
 
+
 
+.full, .page {
 
+  width: 100%;
 
+  min-height: 100vh;
 
+}
 
+
 
+.max {
 
+  max-width: 48em;
 
+}
 
+.min {
 
+  min-width: 12em;
 
+}
 
+.pad {
 
+  width: 95%;
 
+  margin: 5% auto;
 
+  max-width: 48em;
 
+  min-width: 12em;
 
+}
 
+
 
+.right {
 
+  float: right;
 
+  text-align: right;
 
+}
 
+.left {
 
+  float: left;
 
+  text-align: left;
 
+}
 
+.center {
 
+  text-align: center;
 
+  vertical-align: middle;
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+}
 
+.mid { 
+  margin-left: auto;
 
+  margin-right: auto; 
+}
 
+.top {
 
+  vertical-align: top;
 
+}
 
+.low {
 
+  vertical-align: bottom;
 
+}
 
+
 
+.rim { margin: 2%; }
 
+.gap { padding: 3%; }
 
+.stack { line-height: 0; }
 
+.crack { margin-bottom: 1%; }
 
+.sit { margin-bottom: 0; }
 
+
 
+.row { width: 100%; }
 
+.col {
 
+  max-width: 24em;
 
+  min-width: 12em;
 
+}
 
+
 
+.focus {
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+  float: none;
 
+  clear: both;
 
+}
 
+.unit, .symbol {
 
+  display: inline-block;
 
+  vertical-align: inherit;
 
+}
 
+
 
+.leak { overflow: visible; }
 
+.hold { overflow: hidden; }
 
+
 
+.act {
 
+  display: block;
 
+  font-weight: normal;
 
+  text-decoration: none;
 
+  -webkit-transition: all 0.3s;
 
+  transition: all 0.3s;
 
+  cursor: pointer;
 
+}
 
+
 
+.sap { border-radius: 0.1em; }
 
+.jot { border-bottom: 1px dashed #95B2CA; }
 
+
 
+.loud {
 
+  font-size: 150%;
 
+}
 
+.shout {
 
+  font-size: 36pt;
 
+  font-size: 6.5vmax;
 
+}
 
+
 
+
 
+.red { background: #ea3224; }
 
+.green { background: #33cc33; }
 
+.blue { background: #4D79D8; }
 
+.yellow { background: #f2b919; }
 
+.black { background: black; }
 
+.white { background: white; }
 
+
 
+.shade { background: rgba(0%, 0%, 0%, 0.1); }
 
+.tint { background: rgba(100%, 100%, 100%, 0.1); }
 
+
 
+.redt { color: #ea3224; }
 
+.greent { color: #33cc33; }
 
+.bluet { color: #4D79D8; }
 
+.yellowt { color: #f2b919; }
 
+.blackt { color: black; }
 
+.whitet { color: white; }
 
+
 
+.hue {
 
+  background: #4D79D8;
 
+  -webkit-animation: hue 900s infinite;
 
+  animation: hue 900s infinite;
 
+} @keyframes hue {
 
+  0%   {background-color: #4D79D8;}
 
+  25%  {background-color: #33cc33;}
 
+  50%  {background-color: #f2b919;}
 
+  75%  {background-color: #ea3224;}
 
+  100% {background-color: #4D79D8;}
 
+} @-webkit-keyframes hue {
 
+  0%   {background-color: #4D79D8;}
 
+  25%  {background-color: #33cc33;}
 
+  50%  {background-color: #f2b919;}
 
+  75%  {background-color: #ea3224;}
 
+  100% {background-color: #4D79D8;}
 
+}
 
+
 
+.huet {
 
+  color: #4D79D8;
 
+  -webkit-animation: huet 900s infinite;
 
+  animation: huet 900s infinite;
 
+} @keyframes huet {
 
+  0%   {color: #4D79D8;}
 
+  25%  {color: #33cc33;}
 
+  50%  {color: #f2b919;}
 
+  75%  {color: #ea3224;}
 
+  100% {color: #4D79D8;}
 
+} @-webkit-keyframes huet {
 
+  0%   {color: #4D79D8;}
 
+  25%  {color: #33cc33;}
 
+  50%  {color: #f2b919;}
 
+  75%  {color: #ea3224;}
 
+  100% {color: #4D79D8;}
 
+}
 
+
 
+.hue2 {
 
+  background: #ea3224;
 
+  -webkit-animation: hue2 900s infinite;
 
+  animation: hue2 900s infinite;
 
+} @keyframes hue2 {
 
+  0%	 {background-color: #ea3224;}
 
+  25%  {background-color: #4D79D8;}
 
+  50%  {background-color: #33cc33;}
 
+  75%  {background-color: #f2b919;}
 
+  100% {background-color: #ea3224;}
 
+} @-webkit-keyframes hue2 {
 
+  0%	 {background-color: #ea3224;}
 
+  25%  {background-color: #4D79D8;}
 
+  50%  {background-color: #33cc33;}
 
+  75%  {background-color: #f2b919;}
 
+  100% {background-color: #ea3224;}
 
+}
 
+
 
+.huet2 {
 
+  color: #ea3224;
 
+  -webkit-animation: huet2 900s infinite;
 
+  animation: huet2 900s infinite;
 
+} @keyframes huet2 {
 
+  0%	 {color: #ea3224;}
 
+  25%  {color: #4D79D8;}
 
+  50%  {color: #33cc33;}
 
+  75%  {color: #f2b919;}
 
+  100% {color: #ea3224;}
 
+} @-webkit-keyframes huet2 {
 
+  0%	 {color: #ea3224;}
 
+  25%  {color: #4D79D8;}
 
+  50%  {color: #33cc33;}
 
+  75%  {color: #f2b919;}
 
+  100% {color: #ea3224;}
 
+}
 
+
 
+.hue3 {
 
+  background: #33cc33;
 
+  -webkit-animation: hue3 900s infinite;
 
+  animation: hue3 900s infinite;
 
+} @keyframes hue3 {
 
+  0%	 {background-color: #33cc33;}
 
+  25%  {background-color: #f2b919;}
 
+  50%  {background-color: #ea3224;}
 
+  75%  {background-color: #4D79D8;}
 
+  100% {background-color: #33cc33;}
 
+} @-webkit-keyframes hue3 {
 
+  0%	 {background-color: #33cc33;}
 
+  25%  {background-color: #f2b919;}
 
+  50%  {background-color: #ea3224;}
 
+  75%  {background-color: #4D79D8;}
 
+  100% {background-color: #33cc33;}
 
+}
 
+
 
+.huet3 {
 
+  color: #33cc33;
 
+  -webkit-animation: huet3 900s infinite;
 
+  animation: huet3 900s infinite;
 
+} @keyframes huet3 {
 
+  0%	 {color: #33cc33;}
 
+  25%  {color: #f2b919;}
 
+  50%  {color: #ea3224;}
 
+  75%  {color: #4D79D8;}
 
+  100% {color: #33cc33;}
 
+} @-webkit-keyframes huet3 {
 
+  0%	 {color: #33cc33;}
 
+  25%  {color: #f2b919;}
 
+  50%  {color: #ea3224;}
 
+  75%  {color: #4D79D8;}
 
+  100% {color: #33cc33;}
 
+}
 
+
 
+.hue4 {
 
+  background: #f2b919;
 
+  -webkit-animation: hue4 900s infinite;
 
+  animation: hue4 900s infinite;
 
+} @keyframes hue4 {
 
+  0%   {background-color: #f2b919;}
 
+  25%  {background-color: #ea3224;}
 
+  50%  {background-color: #4D79D8;}
 
+  75%	 {background-color: #33cc33;}
 
+  100% {background-color: #f2b919;}
 
+} @-webkit-keyframes hue4 {
 
+  0%   {background-color: #f2b919;}
 
+  25%  {background-color: #ea3224;}
 
+  50%  {background-color: #4D79D8;}
 
+  75%	 {background-color: #33cc33;}
 
+  100% {background-color: #f2b919;}
 
+}
 
+
 
+.huet4 {
 
+  color: #f2b919;
 
+  -webkit-animation: huet4 900s infinite;
 
+  animation: huet4 900s infinite;
 
+} @keyframes huet4 {
 
+  0%   {color: #f2b919;}
 
+  25%  {color: #ea3224;}
 
+  50%  {color: #4D79D8;}
 
+  75%	 {color: #33cc33;}
 
+  100% {color: #f2b919;}
 
+} @-webkit-keyframes huet4 {
 
+  0%   {color: #f2b919;}
 
+  25%  {color: #ea3224;}
 
+  50%  {color: #4D79D8;}
 
+  75%	 {color: #33cc33;}
 
+  100% {color: #f2b919;}
 
+}
 
+
 
+.pulse {
 
+  animation: pulse 2s infinite;
 
+} @keyframes pulse {
 
+  0% {opacity: 1;}
 
+  50% {opacity: 0.5;}
 
+  100% {opacity: 1;}
 
+}
 
+
 
+.joy {
 
+  width: 100px;
 
+  height: 100px;
 
+  position: absolute;
 
+  background: url(https://cdn.jsdelivr.net/npm/gun/examples/pop.png) no-repeat;
 
+  background-position: -2800px 0;
 
+  pointer-events: none;
 
+  z-index: 999999999;
 
+  animation: joy 1s steps(28);
 
+} @keyframes joy {
 
+  0% {background-position: 0 0;}
 
+  100% {background-position: -2800px 0;}
 
+}

Nem az összes módosított fájl került megjelenítésre, mert túl sok fájl változott