Add stat charts
This commit is contained in:
parent
9b7ebde551
commit
b8611de605
5 changed files with 108 additions and 0 deletions
10
www/acp.html
10
www/acp.html
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue