You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
225 lines
9.4 KiB
225 lines
9.4 KiB
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="css/main.css" id="theme">
|
|
<script src="/js/jquery.js"></script>
|
|
<script src="./js/moment.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
|
|
<script src="./js/Chart.Financial.js" type="text/javascript"></script>
|
|
<title>rtbw readout</title>
|
|
</head>
|
|
|
|
<body onload='begin();'>
|
|
<div id='status' style="position: fixed; right: 10; top: 5" class='status'>Connecting...</div>
|
|
|
|
<h1>Real-Time Board Watcher readout</h1>
|
|
|
|
<div style='position: relative'>
|
|
<div class='indentbar' style='background-color: red !important;'> </div>
|
|
<h4 style='position:relative;' onclick='$("#pageinfo").fadeToggle();' class='subheader'>4chan board statistic aggregator.</h4>
|
|
<!--TODO: Make it work like this -> $("#pageinfo").slideToggle(1000,function(){$("#_info").fadeToggle();}); but look nicer></-->
|
|
</div>
|
|
<div>
|
|
<div class='expshare2' hidden id='pageinfo'>
|
|
<div class='indentbar'> </div>
|
|
<div style='padding-left: 17px'>
|
|
<p class='info' id='_info'> <!--TODO: Make this hidden for fade-in></-->
|
|
This software monitors a 4chan board for various properties, mostly relating to post speed and type, and accumulates them into graphs and charts.<br />
|
|
There are a few types of data gathered, <a href="#_total">Total data</a>, <a href="#_session">Session data</a>, <a href="#_super">Aggregate data</a>, and <a href="#_live">Live data</a>. When you load the page you start a session, the client then adds all data it receives from the server into a section for the current session until you close the page or lose connection (the top-right text tells the status of the connection). The Total data section contains the total data gathered by the server since it first started running, this can be used for comparisons to your session data. The Aggregate data section contains a broader average of posts over a specific timespan (see below), it rolls over on the server when it reaches a specific size but the client's size of this is unlimited. The Live data section contains a breakdown of the individual cycles of the server.<br />
|
|
A cycle is the interval at which the server receives information from the backend archiver and sends it to the client, a cycle contains the information required to construct a chart or display a piece of information in a statistical way.<br />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr></hr>
|
|
<p>
|
|
Spidering board: <em id='board'></em><br />
|
|
Server up since: <em id='uptime'></em><br />
|
|
Cycle interval: <em id='interval'></em><br />
|
|
Archiver interval: <em id='binterval'></em><br />
|
|
Server buffer purge interval: <em id='pinterval'></em><br />
|
|
Server aggregate buffer max size: <em id='spinterval'></em><br />
|
|
</p>
|
|
<hr></hr>
|
|
<h2 id="_total">Total uptime stats</h2>
|
|
<ul>
|
|
<li>Total server cycles: <em id='at_upcycle'></em></li>
|
|
<li>Last no.: <em id='at_last'></em></li>
|
|
<li>Posts: <em id='at_posts'></em></li>
|
|
<li>Flag share: <em id='at_flagshare'></em> <a class='expand' id='at_flagshare_exp'>+</a></li>
|
|
<li>Avg. posts per cycle: <em id='at_avg'>0</em></li>
|
|
</ul>
|
|
<div style='padding-left: 10px'>
|
|
<!-- TODO: Change these to expshare2></-->
|
|
<div class='expshare' hidden id='at_flagshare_container' style="overflow-y: auto; height: 200px;">
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<h3>Posts by flag</h3>
|
|
<div style="height: 340px; ">
|
|
<div class='contain' style="height: 300px; width:80%; float:left;">
|
|
<canvas id='tPostsByFlag'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:right;">
|
|
<canvas id='tPostsByFlagPie'></canvas>
|
|
</div>
|
|
</div>
|
|
<h3>Other shares</h3>
|
|
<div style="height: 340px;">
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tNmaes'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tImages'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tThreads'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tIds'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tSubjects'></canvas>
|
|
</div>
|
|
</div>
|
|
Identity breakdown: <a class='expand' id='at_ident_bd_expand'>+</a>
|
|
<div>
|
|
<div class='expshare2' hidden id='at_idbd_share'>
|
|
<div class='indentbar'> </div>
|
|
<div style='padding-left: 17px'>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tNmaesDetailed'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:80%; float:right;">
|
|
<canvas id='tNmaesDetailedBar'></canvas>
|
|
</div>
|
|
Show Anon <input type='checkbox' id='at_idbd_showanon' /> List: <a class='expand' id='at_nameshare_exp'>+</a>
|
|
<div class='expshare' hidden id='at_nameshare_container' style="margin-top: 10px; overflow-y: auto; height: 200px;">
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr></hr>
|
|
<h2 id="_session">Session stats</h2>
|
|
<ul>
|
|
<li>Session started: <em id='s_started'></em></li>
|
|
<li>Total session cycles: <em id='s_upcycle'></em></li>
|
|
<li>Posts: <em id='s_posts'></em></li>
|
|
<li>Flag share: <em id='s_flagshare'></em> <a class='expand' id='s_flagshare_exp'>+</a></li>
|
|
<li>Avg. posts per cycle: <em id='s_avg'>0</em></li>
|
|
</ul>
|
|
<div style='padding-left: 10px'>
|
|
<div class='expshare' hidden id='s_flagshare_container' style="overflow-y: auto; height: 200px;">
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<h3>Posts by flag</h3>
|
|
<div style="height: 340px; ">
|
|
<div class='contain' style="height: 300px; width:80%; float:left;">
|
|
<canvas id='tsPostsByFlag'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:right;">
|
|
<canvas id='tsPostsByFlagPie'></canvas>
|
|
</div>
|
|
</div>
|
|
<h3>Other shares</h3>
|
|
<div style="height: 340px;">
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tsNmaes'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tsImages'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tsThreads'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tsIds'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tsSubjects'></canvas>
|
|
</div>
|
|
</div>
|
|
Identity breakdown: <a class='expand' id='s_ident_bd_expand'>+</a>
|
|
<div>
|
|
<div class='expshare2' hidden id='s_idbd_share'>
|
|
<div class='indentbar'> </div>
|
|
<div style='padding-left: 17px'>
|
|
<div class='contain' style="height: 300px; width:20%; float:left;">
|
|
<canvas id='tsNmaesDetailed'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:80%; float:right;">
|
|
<canvas id='tsNmaesDetailedBar'></canvas>
|
|
</div>
|
|
Show Anon <input type='checkbox' id='s_idbd_showanon' /> List: <a class='expand' id='s_nameshare_exp'>+</a>
|
|
<div class='expshare' hidden id='s_nameshare_container' style="margin-top: 10px; overflow-y: auto; height: 200px;">
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3>Average comparisons</h3>
|
|
<div class='contain' style="height: 300px; width:100%;">
|
|
<canvas id='tsCycleSpeed'></canvas>
|
|
</div>
|
|
<div class='ctlcont'><input id='cs_purge' type='button' value='Purge' /> Rollover at: <input type='textbox' id='cs_rlat' /> <em id='e_cs_rlat' class='error'></em></div>
|
|
|
|
<hr></hr>
|
|
<h2 id="_super">Aggregate stats</h2>
|
|
<div class='contain' style="height: 300px; width:100%;">
|
|
<canvas id='tAgLine'></canvas>
|
|
</div>
|
|
<div class='contain' style="height: 300px; width:100%;">
|
|
<canvas id='tAgCandle'></canvas>
|
|
</div>
|
|
<div class='ctlcont'><input id='ag_shift' value=">>" type='button' /></div>
|
|
<hr></hr>
|
|
<h2 id="_live">Live stats</h2>
|
|
<div class='contain' id='cycleSpeedC' style='overflox-x: scroll; position: relative; width: 100%; height: 300px;'>
|
|
<canvas id='cycleSpeed'></canvas>
|
|
</div>
|
|
<!-- style='position: absolute; left: 0; top: 0;pointer-events:none;'></-->
|
|
<div class='contain' style="height: 300px; width:100%;">
|
|
<canvas id='cycleBar'></canvas>
|
|
</div>
|
|
<div>
|
|
<div class='tab' style="overflow-y: auto; height: 200px; ">
|
|
<table id='cytb' style='width: 100%;'>
|
|
<thead>
|
|
<tr id='cytb_headers'>
|
|
<th>Timestamp</th>
|
|
<th>Last no.</th>
|
|
<th>Posts</th>
|
|
<th>% of avg.</th>
|
|
<th>Flag share</th>
|
|
<th>Names</th>
|
|
<th>Trips</th>
|
|
<th>Names+trips</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id='cytb_body'>
|
|
<tr hidden></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class='ctlcont'><input id='cytb_purge' type='button' value='Purge' /> Rollover at: <input type='textbox' id='cytb_rlat' /> <em id='e_rlat' class='error'></em></div>
|
|
</div>
|
|
<hr></hr>
|
|
<div class='footer'>
|
|
<p>Backend source: <a target=_blank href='https://github.com/notflan/rtbwpy'>rtbwpy</a><br />
|
|
Frontend source: <a title=" As it stands the code is, frankly, embarrassingly bad and is in need of a lot of refactoring.">I will release this when it is of an acceptable quality.</a></p>
|
|
<em>This page is served statically.</em>
|
|
</div>
|
|
|
|
<script src="js/cyclefunc.js"></script>
|
|
<script src="js/client.js"></script>
|
|
<script src="js/renderer.js"></script>
|
|
|
|
</body>
|
|
</html>
|