This repository has been archived on 2023-07-05. You can view files and clone it, but cannot push or open issues or pull requests.
clessy/stats-web/index.html
2016-02-11 15:33:58 +00:00

183 lines
No EOL
5.8 KiB
HTML

<!doctype html>
<html>
<head>
<title>ClessyStats</title>
<script>
// Pegasus 0.3.2 (https://github.com/typicode/pegasus)
function p(a,b){return b=new XMLHttpRequest,b.open("GET",a),a=[],b.onreadystatechange=b.then=function(c,d,e,f){if(c&&c.call&&(a=[,c,d]),4==b.readyState&&(e=a[0|b.status/200])){try{f=JSON.parse(b.responseText)}catch(g){f=null}e(f,b)}},b.send(),b};
// uAMD
function req(q,c){var D={};C=D.length=q.length;q.map(function(Q,i){Q(function(d){D[i]=d;C--;if(!C)c.apply(0,D);})});}
function Qapi(u){return p(u).then}
function Qready(cb){window.onload=cb}
</script>
<script src="Chart.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
background-color: #f3f3f3;
margin: 0; padding: 0.5rem;
}
section {
display: flex;
flex-wrap: wrap;
}
article {
flex: 320px;
background-color: #fff;
margin: 0.1rem;
padding: 0.5rem;
}
article header {
font-family: 'Raleway', sans-serif;
font-size: 1.2rem;
font-weight: 300;
margin-bottom: 0.5rem;
text-align: center;
}
table { margin: 0 auto; max-width: 100%; }
#totalmsg { text-align: center; padding-bottom: 1rem; }
#usermsg i { font-size: 0.8rem; font-style: normal; }
#usermsg tr:nth-child(even) { background-color: #fafafa; }
#usermsg td { text-align: center; padding: 0.3rem 0; }
#usermsg th { padding: 0.3rem 0.5rem; }
#usermsg td:first-child { text-align: left; padding: 0.3rem 0.6rem; }
canvas {
}
</style>
</head>
<body>
<main>
<section>
<article>
<header>Messaggi divisi per tipo</header>
<center>
<canvas id="chart-type" height="300" style="max-width: 320px;"></canvas>
<div id="type-legend"></div>
</center>
</article>
<article>
<header>Attivit&agrave; per giorno della settimana</header>
<center>
<canvas id="chart-wday" height="300" style="max-width: 320px;"></canvas>
</center>
</article>
<article>
<header>Attivit&agrave; per ora del giorno</header>
<center>
<canvas id="chart-hour" height="300" style="max-width: 320px;"></canvas>
</center>
</article>
</section>
<section>
<article>
<header>Ma quanto scrivete?</header>
<div id="totalmsg">
In totale sono stati scritti circa <b><span id="totalcount"></span> messaggi</b>.
</div>
<table id="usermsg">
<tr>
<th width="60%">Nickname</th>
<th width="20%">Messaggi totali</th>
<th width="20%">% dei messaggi</th>
</tr>
</table>
</article>
</section>
</main>
<script>
// Utility functions
function toArray(o){var a=[];for(k in o){a.push([k,o[k]]);}return a}
function sortMessages(a,b){return b[1]-a[1]}
function mkRow(c){var a="createElement",r=document[a]("tr");c.map(function(C){var A=document[a]("td");A.innerHTML=C;r.appendChild(A)});return r;}
// Load from backend
req([
Qapi("/stats"),
Qapi("/users"),
Qready
], function(stats, users) {
var font = "'Source Sans Pro', sans-serif";
Chart.defaults.global.defaultFontFamily = font;
Chart.defaults.global.legend.labels.fontFamily = font;
Chart.defaults.global.title.fontFamily = font;
/* Get chart canvas elements */
var typectx = document.getElementById("chart-type").getContext("2d");
var wdayctx = document.getElementById("chart-wday").getContext("2d");
var hourctx = document.getElementById("chart-hour").getContext("2d");
/* Create charts */
var typechart = new Chart(typectx, {
type:'pie',
data: {
labels: ["Testuali", "Clip audio", "Immagini/Foto", "Sticker", "Video", "Messaggio vocale", "Contatto", "Locazione", "File generico"],
datasets: [{
data: stats.ByType,
backgroundColor: ["#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360","#EE46F7","#46F7D7","#BFF746"],
hoverBackgroundColor: ["#FF5A5E","#5AD3D1","#FFC870","#A8B3C5","#616774","#F75AFF","#5AFFE1","#BEF746"]
}]
}
});
//document.getElementById("type-legend").innerHTML = typechart.generateLegend();
var wdaychart = new Chart(wdayctx, {
type:'bar',
data: {
labels: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
datasets: [{
label: "Messaggi",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: stats.ByWeekday
}]
},
options: {
legend: { display: false },
scales: {
xAxes: [{ ticks: { fontFamily: font } }],
yAxes: [{ ticks: { fontFamily: font } }],
}
}
});
var hourchart = new Chart(hourctx, {
type: 'bar',
data: {
labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
datasets: [{
label: "Messaggi",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: stats.ByHour
}]
},
options: {
legend: { display: false },
scales: {
xAxes: [{ ticks: { fontFamily: font } }],
yAxes: [{ ticks: { fontFamily: font } }],
}
}
});
/* Total stats */
document.getElementById("totalcount").innerHTML = stats.TotalCount;
/* User stats */
function percent(a){return Math.round(a/stats.TotalCount*1e4)/1e2;}
function nick(a){return users[a]?users[a]+" <i>("+a+")</i>":a}
function enrich(a){return [nick(a[0]), a[1], percent(a[1])]}
function append(a){usertable.appendChild(a)}
var userlist = toArray(stats.ByUserCount).sort(sortMessages);
var usertable = document.getElementById("usermsg");
userlist.map(enrich).map(mkRow).map(append);
});
</script>
</body>
</html>