Added name list

master
Ringo Watanabe 6 years ago
parent b9f41a2dde
commit e2ccbcc420

@ -16,6 +16,11 @@ h1, h2, h3 {
color: #f5f8f6; color: #f5f8f6;
} }
.info a:link, .info a:visited {
color: rgb(102, 255, 255)
}
.subheader { .subheader {
margin-top: -15px; margin-top: -15px;
padding-top: 3px; padding-top: 3px;
@ -81,11 +86,16 @@ em {
.footer { .footer {
font-style: italic; font-style: italic;
font-family: Tahoma; font-family: Tahoma;
color: #6d6f71;
font-size:9pt; font-size:9pt;
} }
.footer em {
color: #9d9fa1;
}
.footer a { .footer a {
color: #f5f8f6 color: #8d8f91;
} }
.footer a:link { .footer a:link {

@ -24,10 +24,9 @@
<div class='indentbar'> </div> <div class='indentbar'> </div>
<div style='padding-left: 17px'> <div style='padding-left: 17px'>
<p class='info' id='_info'> <!--TODO: Make this hidden for fade-in></--> <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 /> This software monitors a 4chan board for various properties, mostly relating to post speed and type, and accumulates 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 /> 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 /> 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> </p>
</div> </div>
</div> </div>
@ -42,11 +41,11 @@
Server aggregate buffer max size: <em id='spinterval'></em><br /> Server aggregate buffer max size: <em id='spinterval'></em><br />
</p> </p>
<hr></hr> <hr></hr>
<h2>Total uptime stats</h2> <h2 id="_total">Total uptime stats</h2>
<ul> <ul>
<li>Total server cycles: <em id='at_upcycle'></em></li> <li>Total server cycles: <em id='at_upcycle'></em></li>
<li>Last no.: <em id='at_last'></em></li> <li>Last no.: <em id='at_last'></em></li>
<li>Posts: <em id='at_posts'></em></li><!-- TODO: fill this out></--> <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>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> <li>Avg. posts per cycle: <em id='at_avg'>0</em></li>
</ul> </ul>
@ -89,21 +88,28 @@
<div class='expshare2' hidden id='at_idbd_share'> <div class='expshare2' hidden id='at_idbd_share'>
<div class='indentbar'> </div> <div class='indentbar'> </div>
<div style='padding-left: 17px'> <div style='padding-left: 17px'>
<div class='contain' style="height: 300px; width:20%;"> <div class='contain' style="height: 300px; width:20%; float:left;">
<canvas id='tNmaesDetailed'></canvas> <canvas id='tNmaesDetailed'></canvas>
</div> </div>
Show Anon <input type='checkbox' checked id='at_idbd_showanon' /> <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> </div>
</div> </div>
<hr></hr> <hr></hr>
<h2>Session stats</h2> <h2 id="_session">Session stats</h2>
<ul> <ul>
<li>Session started: <em id='s_started'></em></li> <li>Session started: <em id='s_started'></em></li>
<li>Total session cycles: <em id='s_upcycle'></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>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>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></--> <li>Avg. posts per cycle: <em id='s_avg'>0</em></li>
</ul> </ul>
<div style='padding-left: 10px'> <div style='padding-left: 10px'>
<div class='expshare' hidden id='s_flagshare_container' style="overflow-y: auto; height: 200px;"> <div class='expshare' hidden id='s_flagshare_container' style="overflow-y: auto; height: 200px;">
@ -143,10 +149,17 @@
<div class='expshare2' hidden id='s_idbd_share'> <div class='expshare2' hidden id='s_idbd_share'>
<div class='indentbar'> </div> <div class='indentbar'> </div>
<div style='padding-left: 17px'> <div style='padding-left: 17px'>
<div class='contain' style="height: 300px; width:20%;"> <div class='contain' style="height: 300px; width:20%; float:left;">
<canvas id='tsNmaesDetailed'></canvas> <canvas id='tsNmaesDetailed'></canvas>
</div> </div>
Show Anon <input type='checkbox' checked id='s_idbd_showanon' /> <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> </div>
</div> </div>
@ -157,7 +170,7 @@
<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> <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> <hr></hr>
<h2>Aggregate stats</h2> <h2 id="_super">Aggregate stats</h2>
<div class='contain' style="height: 300px; width:100%;"> <div class='contain' style="height: 300px; width:100%;">
<canvas id='tAgLine'></canvas> <canvas id='tAgLine'></canvas>
</div> </div>
@ -166,7 +179,7 @@
</div> </div>
<div class='ctlcont'><input id='ag_shift' value=">>" type='button' /></div> <div class='ctlcont'><input id='ag_shift' value=">>" type='button' /></div>
<hr></hr> <hr></hr>
<h2>Live stats</h2> <h2 id="_live">Live stats</h2>
<div class='contain' id='cycleSpeedC' style='overflox-x: scroll; position: relative; width: 100%; height: 300px;'> <div class='contain' id='cycleSpeedC' style='overflox-x: scroll; position: relative; width: 100%; height: 300px;'>
<canvas id='cycleSpeed'></canvas> <canvas id='cycleSpeed'></canvas>
</div> </div>

@ -1,6 +1,6 @@
///TODO: Refactor this crap ///TODO: Refactor this crap
///TODO: Add % of session and % of all time average lines to aggregate line graph ///TODO: Add % of session to aggregate line graph
var totalCan = $("#cycleBar"); var totalCan = $("#cycleBar");
var speedCan = $('#cycleSpeed'); var speedCan = $('#cycleSpeed');
@ -14,7 +14,9 @@ var tIdsCan= $('#tIds');
var tSubjectsCan = $('#tSubjects'); var tSubjectsCan = $('#tSubjects');
var tNmaesDetailedCan = $('#tNmaesDetailed'); var tNmaesDetailedCan = $('#tNmaesDetailed');
var tNmaesDetailedBarCan = $('#tNmaesDetailedBar');
var tsNmaesDetailedCan = $('#tsNmaesDetailed'); var tsNmaesDetailedCan = $('#tsNmaesDetailed');
var tsNmaesDetailedBarCan = $('#tsNmaesDetailedBar');
var tsflagCan = $('#tsPostsByFlag'); var tsflagCan = $('#tsPostsByFlag');
var tsflagPieCan = $('#tsPostsByFlagPie'); var tsflagPieCan = $('#tsPostsByFlagPie');
@ -24,7 +26,6 @@ var tsThreadsCan = $('#tsThreads');
var tsIdsCan= $('#tsIds'); var tsIdsCan= $('#tsIds');
var tsSubjectsCan = $('#tsSubjects'); var tsSubjectsCan = $('#tsSubjects');
var tsCycleSpeedCan = $('#tsCycleSpeed'); var tsCycleSpeedCan = $('#tsCycleSpeed');
//var tsCycleAverageCan = $('#tsCycleAverage');
var tAgCandleCan = $('#tAgCandle'); var tAgCandleCan = $('#tAgCandle');
var tAgLineCan =$('#tAgLine'); var tAgLineCan =$('#tAgLine');
@ -165,6 +166,7 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
$('#'+pfx+'upcycle').text(allTimeAverage._n); $('#'+pfx+'upcycle').text(allTimeAverage._n);
$('#'+pfx+'flagshare_container > ul').empty(); $('#'+pfx+'flagshare_container > ul').empty();
$('#'+pfx+'nameshare_container > ul').empty();
share.sort(function (a, b) { share.sort(function (a, b) {
return a.total < b.total ? 1 : -1; return a.total < b.total ? 1 : -1;
}); });
@ -203,6 +205,9 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
return a.total < b.total ? 1 : -1; return a.total < b.total ? 1 : -1;
}); });
gr.anamed.data.labels.length =
gr.anamed.data.datasets[0].data.length = 0;
gr.anamedpie.data.labels.length = gr.anamedpie.data.labels.length =
gr.anamedpie.data.datasets[0].data.length = gr.anamedpie.data.datasets[0].data.length =
gr.anamedpie.data.datasets[0].backgroundColor.length = 0; gr.anamedpie.data.datasets[0].backgroundColor.length = 0;
@ -216,6 +221,12 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
} }
for(var i in nshare) for(var i in nshare)
{ {
//TODO: Recalculate these percentages when show anon is off
$('#'+pfx+'nameshare_container > ul').append("<li>"+nshare[i]["key"]+": "+(nshare[i]["val"]*100.00).toFixed(2)+"% ("+nshare[i]["total"]+")</li>");
gr.anamed.data.labels.push(nshare[i]["key"]);
gr.anamed.data.datasets[0].data.push(nshare[i]["total"]);
gr.anamedpie.data.labels.push(nshare[i]["key"]); gr.anamedpie.data.labels.push(nshare[i]["key"]);
gr.anamedpie.data.datasets[0].data.push(nshare[i]["total"]); gr.anamedpie.data.datasets[0].data.push(nshare[i]["total"]);
@ -244,6 +255,7 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
gr.aflagpie.update(); gr.aflagpie.update();
gr.anamepie.update(); gr.anamepie.update();
gr.anamedpie.update(); gr.anamedpie.update();
gr.anamed.update();
gr.aimagepie.update(); gr.aimagepie.update();
gr.athreadpie.update(); gr.athreadpie.update();
gr.aidspie.update(); gr.aidspie.update();
@ -483,6 +495,34 @@ function begin() {
} }
}); });
var chartANamesDetailedBar = new Chart(tNmaesDetailedBarCan, {
type: "bar",
data: {
labels: [],
datasets: [{
label: "Posts",
backgroundColor: "rgba(255, 124, 60, 0.8)",
data: [],
}]
}, options: {
maintainAspectRatio: false,
animation: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
display: false
}]
}
}
});
var chartAFlags = new Chart(tflagCan, { var chartAFlags = new Chart(tflagCan, {
type: "bar", type: "bar",
data: { data: {
@ -622,6 +662,34 @@ function begin() {
} }
}); });
var chartSNamesDetailedBar = new Chart(tsNmaesDetailedBarCan, {
type: "bar",
data: {
labels: [],
datasets: [{
label: "Posts",
backgroundColor: "rgba(255, 124, 60, 0.8)",
data: [],
}]
}, options: {
maintainAspectRatio: false,
animation: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
display: false
}]
}
}
});
var chartSFlags = new Chart(tsflagCan, { var chartSFlags = new Chart(tsflagCan, {
type: "bar", type: "bar",
data: { data: {
@ -852,6 +920,7 @@ function begin() {
aflagpie: chartAFlagsPie, aflagpie: chartAFlagsPie,
anamepie: chartsANamesPie, anamepie: chartsANamesPie,
anamedpie: chartANamesDetailedPie, anamedpie: chartANamesDetailedPie,
anamed: chartANamesDetailedBar,
aimagepie: chartAImagesPie, aimagepie: chartAImagesPie,
athreadpie: chartAthreadsPie, athreadpie: chartAthreadsPie,
aidspie: chartAIdsPie, aidspie: chartAIdsPie,
@ -865,6 +934,7 @@ function begin() {
aflagpie: chartSFlagsPie, aflagpie: chartSFlagsPie,
anamepie: chartsSNamesPie, anamepie: chartsSNamesPie,
anamedpie: chartSNamesDetailedPie, anamedpie: chartSNamesDetailedPie,
anamed: chartSNamesDetailedBar,
aimagepie: chartSImagesPie, aimagepie: chartSImagesPie,
athreadpie: chartSthreadsPie, athreadpie: chartSthreadsPie,
aidspie: chartSIdsPie, aidspie: chartSIdsPie,
@ -931,40 +1001,15 @@ function begin() {
chartAGCandle.update(); chartAGCandle.update();
chartAGLine.update(); chartAGLine.update();
/*$('#at_flagshare_exp').on("click", function() {
if($('#at_flagshare_container').is(":hidden")) {
$('#at_flagshare_container').show(1000, function() {
$('#at_flagshare_exp').text("-");
});
} else {
$('#at_flagshare_container').hide(1000, function() {
$('#at_flagshare_exp').text("+");
});
}
});*/
addExpander('#at_flagshare_exp', '#at_flagshare_container'); addExpander('#at_flagshare_exp', '#at_flagshare_container');
/*$('#s_flagshare_exp').on("click", function() {
if($('#s_flagshare_container').is(":hidden")) {
$('#s_flagshare_container').show(1000, function() {
$('#s_flagshare_exp').text("-");
});
} else {
$('#s_flagshare_container').hide(1000, function() {
$('#s_flagshare_exp').text("+");
});
}
});*/
addExpander('#s_flagshare_exp', '#s_flagshare_container'); addExpander('#s_flagshare_exp', '#s_flagshare_container');
addExpander('#at_ident_bd_expand', '#at_idbd_share'); addExpander('#at_ident_bd_expand', '#at_idbd_share');
addExpander('#s_ident_bd_expand', '#s_idbd_share'); addExpander('#s_ident_bd_expand', '#s_idbd_share');
addExpander('#at_nameshare_exp', '#at_nameshare_container');
addExpander('#s_nameshare_exp', '#s_nameshare_container');
$('#cytb_purge').on("click", function() { $('#cytb_purge').on("click", function() {
$('#cytb_body').empty(); $('#cytb_body').empty();
$('<tr hidden></tr>').appendTo($('#cytb_body')); $('<tr hidden></tr>').appendTo($('#cytb_body'));

Loading…
Cancel
Save