Add stat charts

This commit is contained in:
calzoneman 2013-07-16 14:57:34 -04:00
parent 9b7ebde551
commit b8611de605
5 changed files with 108 additions and 0 deletions

View file

@ -44,6 +44,7 @@
<li id="li_userlookup"><a href="javascript:void(0)" id="show_userlookup">Users</a></li>
<li id="li_chanloaded"><a href="javascript:void(0)" id="show_chanloaded">Loaded Channels</a></li>
<li id="li_actionlog"><a href="javascript:void(0)" id="show_actionlog">Action Log</a></li>
<li id="li_stats"><a href="javascript:void(0)" id="show_stats">Server Stats</a></li>
</ul>
</li>
</ul>
@ -219,6 +220,14 @@
</thead>
</table>
</div>
<div class="span12" id="stats">
<h3>User Count</h3>
<canvas id="stat_users" width="1170" height="400"></canvas>
<h3>Channel Count</h3>
<canvas id="stat_channels" width="1170" height="400"></canvas>
<h3>Memory Usage (MB)</h3>
<canvas id="stat_mem" width="1170" height="400"></canvas>
</div>
</div>
</div>
</div>
@ -240,6 +249,7 @@
<script src="./assets/js/bootstrap.js"></script>
<script src="./assets/js/bootstrap-transition.js"></script>
<script src="./assets/js/bootstrap-modal.js"></script>
<script src="./assets/js/chart.js"></script>
<!-- Mine -->
<script src="./assets/js/iourl.js"></script>

View file

@ -169,6 +169,11 @@ $("#actionlog_time").click(function() {
tableResort($("#actionlog table"), "time");
});
menuHandler("#show_stats", "#stats");
$("#show_stats").click(function () {
socket.emit("acp-view-stats");
});
function reverseLog() {
$("#log").text($("#log").text().split("\n").reverse().join("\n"));
}
@ -492,6 +497,72 @@ function setupCallbacks() {
$("<td/>").appendTo(tr);
});
socket.on("acp-view-stats", function (stats) {
var labels = [];
var ucounts = [];
var ccounts = [];
var mcounts = [];
var lastdate = "";
stats.forEach(function (s) {
var d = new Date(parseInt(s.time));
var t = "";
if(d.toDateString() !== lastdate) {
lastdate = d.toDateString();
t = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
t += " " + d.toTimeString().split(" ")[0];
}
else {
t = d.toTimeString().split(" ")[0];
}
labels.push(t);
ucounts.push(s.usercount);
ccounts.push(s.chancount);
mcounts.push(s.mem / 1000000);
});
var user_data = {
labels: labels,
datasets: [
{
fillColor: "rgba(151, 187, 205, 0.5)",
strokeColor: "rgba(151, 187, 205, 1)",
pointColor: "rgba(151, 187, 205, 1)",
pointStrokeColor: "#fff",
data: ucounts
}
]
};
var chan_data = {
labels: labels,
datasets: [
{
fillColor: "rgba(151, 187, 205, 0.5)",
strokeColor: "rgba(151, 187, 205, 1)",
pointColor: "rgba(151, 187, 205, 1)",
pointStrokeColor: "#fff",
data: ccounts
}
]
};
var mem_data = {
labels: labels,
datasets: [
{
fillColor: "rgba(151, 187, 205, 0.5)",
strokeColor: "rgba(151, 187, 205, 1)",
pointColor: "rgba(151, 187, 205, 1)",
pointStrokeColor: "#fff",
data: mcounts
}
]
};
new Chart($("#stat_users")[0].getContext("2d")).Line(user_data);
new Chart($("#stat_channels")[0].getContext("2d")).Line(chan_data);
new Chart($("#stat_mem")[0].getContext("2d")).Line(mem_data);
});
}
/* cookie util */