diff --git a/www/css/main.css b/www/css/main.css index 2c7c761..7c028fb 100644 --- a/www/css/main.css +++ b/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 { diff --git a/www/index.html b/www/index.html index 3c96c91..8b2540d 100644 --- a/www/index.html +++ b/www/index.html @@ -24,10 +24,9 @@

- This software monitors a 4chan board for various properties, mostly relating to post speed and type, and aggregates them into graphs and charts.
- 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.
+ This software monitors a 4chan board for various properties, mostly relating to post speed and type, and accumulates them into graphs and charts.
+ There are a few types of data gathered, Total data, Session data, Aggregate data, and Live data. 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.
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.
- 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.

@@ -42,11 +41,11 @@ Server aggregate buffer max size:

-

Total uptime stats

+

Total uptime stats

@@ -89,21 +88,28 @@
-

Session stats

+

Session stats

-

Live stats

+

Live stats

diff --git a/www/js/renderer.js b/www/js/renderer.js index 6b203a1..40679a3 100644 --- a/www/js/renderer.js +++ b/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("
  • "+nshare[i]["key"]+": "+(nshare[i]["val"]*100.00).toFixed(2)+"% ("+nshare[i]["total"]+")
    • "); + + 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(); @@ -482,6 +494,34 @@ function begin() { showAnon: '#at_idbd_showanon' } }); + + 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", @@ -621,6 +661,34 @@ function begin() { showAnon: '#s_idbd_showanon' } }); + + 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", @@ -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(); $('').appendTo($('#cytb_body'));