<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 aggregates them into graphs and charts.<br />
The main use is of `Sessions'. 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). There are also sections containing a server-maintained set of information from the total uptime of the server; and a section of averages over larger timespans (Aggregate section). There is also a `Live' section which shows each `cycle' of the aggregator and has information on a per-cycle basis.<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 />
In the `Aggregate stats' section, a server-maintained average of all cycles in a select timeframe is displayed. The client adds its own data to this when the session starts but a backlog on the server is maintained for an amount of time. <!--TODO: Make the section links that jump to # values in url></-->
</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>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><!-- TODO: fill this out></-->
<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%;">
<canvas id='tNmaesDetailed'></canvas>
</div>
Show Anon <input type='checkbox' checked id='at_idbd_showanon' />
</div>
</div>
</div>
<hr></hr>
<h2>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><!-- TODO: fill this out></-->
<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><!--TODO: Move this into another `This session' section></-->
</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%;">
<canvas id='tsNmaesDetailed'></canvas>
</div>
Show Anon <input type='checkbox' checked id='s_idbd_showanon' />
</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>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>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>