Added name list

www/css/main.css

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

www/index.html

@@ -24,10 +24,9 @@
 				<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 />
+						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 />
-						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>
@@ -42,11 +41,11 @@
 			Server aggregate buffer max size: <em id='spinterval'></em><br />
 		</p>
 		<hr></hr>
-		<h2>Total uptime stats</h2>
+		<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><!-- 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>Avg. posts per cycle: <em id='at_avg'>0</em></li>
 		</ul>
@@ -89,21 +88,28 @@
 			<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%;">
+					<div class='contain' style="height: 300px; width:20%; float:left;">
 						<canvas id='tNmaesDetailed'></canvas>
 					</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>
 		<hr></hr>
-		<h2>Session stats</h2>
+		<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><!-- 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>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>
 		<div style='padding-left: 10px'>
 			<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='indentbar'> </div>
 				<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>
 					</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>
@@ -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>
 		
 		<hr></hr>
-		<h2>Aggregate stats</h2>
+		<h2 id="_super">Aggregate stats</h2>
 		<div class='contain' style="height: 300px; width:100%;">
 			<canvas id='tAgLine'></canvas>
 		</div>
@@ -166,7 +179,7 @@
 		</div>
 		<div class='ctlcont'><input id='ag_shift' value=">>" type='button' /></div>
 		<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;'>
 			<canvas id='cycleSpeed'></canvas>	
 		</div>

www/js/renderer.js

@@ -1,6 +1,6 @@
 ///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 speedCan = $('#cycleSpeed');
@@ -14,7 +14,9 @@ var tIdsCan= $('#tIds');
 var tSubjectsCan = $('#tSubjects');
 
 var tNmaesDetailedCan = $('#tNmaesDetailed');
+var tNmaesDetailedBarCan = $('#tNmaesDetailedBar');
 var tsNmaesDetailedCan = $('#tsNmaesDetailed');
+var tsNmaesDetailedBarCan = $('#tsNmaesDetailedBar');
 
 var tsflagCan = $('#tsPostsByFlag');
 var tsflagPieCan = $('#tsPostsByFlagPie');
@@ -24,7 +26,6 @@ var tsThreadsCan = $('#tsThreads');
 var tsIdsCan= $('#tsIds');
 var tsSubjectsCan = $('#tsSubjects');
 var tsCycleSpeedCan = $('#tsCycleSpeed');
-//var tsCycleAverageCan = $('#tsCycleAverage');
 
 var tAgCandleCan = $('#tAgCandle');
 var tAgLineCan  =$('#tAgLine');
@@ -165,6 +166,7 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
 	$('#'+pfx+'upcycle').text(allTimeAverage._n);
 	
 	$('#'+pfx+'flagshare_container > ul').empty();
+	$('#'+pfx+'nameshare_container > ul').empty();
 	share.sort(function (a, b) {
 		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;
 	});
 	
+	gr.anamed.data.labels.length =
+	gr.anamed.data.datasets[0].data.length = 0;
+	
 	gr.anamedpie.data.labels.length =
 	gr.anamedpie.data.datasets[0].data.length = 
 	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)
 	{
+		//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.datasets[0].data.push(nshare[i]["total"]);
 		
@@ -244,6 +255,7 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
 	gr.aflagpie.update();
 	gr.anamepie.update();
 	gr.anamedpie.update();
+	gr.anamed.update();
 	gr.aimagepie.update();
 	gr.athreadpie.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, {
 		type: "bar",
 		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, {
 		type: "bar",
 		data: {
@@ -852,6 +920,7 @@ function begin() {
 			aflagpie: chartAFlagsPie, 
 			anamepie: chartsANamesPie,
 			anamedpie: chartANamesDetailedPie, 
+			anamed: chartANamesDetailedBar,
 			aimagepie: chartAImagesPie, 
 			athreadpie: chartAthreadsPie,
 			aidspie: chartAIdsPie,
@@ -865,6 +934,7 @@ function begin() {
 			aflagpie: chartSFlagsPie, 
 			anamepie: chartsSNamesPie, 
 			anamedpie: chartSNamesDetailedPie,
+			anamed: chartSNamesDetailedBar,
 			aimagepie: chartSImagesPie, 
 			athreadpie: chartSthreadsPie,
 			aidspie: chartSIdsPie,
@@ -931,40 +1001,15 @@ function begin() {
 		chartAGCandle.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');
-		
-		/*$('#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('#at_ident_bd_expand', '#at_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_body').empty();
 			$('<tr hidden></tr>').appendTo($('#cytb_body'));