91 lines
3.7 KiB
HTML
91 lines
3.7 KiB
HTML
<html>
|
|
<head>
|
|
<title>Tilder Disk Usage</title>
|
|
</head>
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
|
|
<script type="text/javascript">
|
|
google.load("visualization", "1.1", {packages:["corechart", "line"]});
|
|
google.setOnLoadCallback(drawCharts);
|
|
function drawCharts() {
|
|
var data = new google.visualization.DataTable();
|
|
var piechart = new google.visualization.PieChart(document.getElementById('donutchart'));
|
|
|
|
var linedata = new google.visualization.DataTable();
|
|
var linechart = new google.visualization.LineChart(document.getElementById('linechart'));
|
|
|
|
var date = new Date(0);
|
|
data.addColumn('string', 'User');
|
|
data.addColumn('number', 'Disk Usage');
|
|
data.addColumn('number', 'File Count');
|
|
|
|
|
|
var pieoptions = {
|
|
title: 'Tilder Disk Usage',
|
|
subtitle: 'in kb',
|
|
pieHole: 0.4,
|
|
sliceVisibilityThreshold: 0.01
|
|
};
|
|
var lineoptions = {
|
|
title: 'Tilder Disk Usage',
|
|
subtitle: 'over time',
|
|
vAxis: {
|
|
0: {title: 'kb'},
|
|
logScale: true
|
|
}
|
|
};
|
|
|
|
jQuery.getJSON("/~krowbar/data/du_log.json", function(json) {
|
|
date.setUTCSeconds(json[json.length-1].date);
|
|
//Draw PieChart
|
|
data.addRows(
|
|
_.map(json[json.length-1].data, function(d) { return [d.user, d.du, d.files];})
|
|
);
|
|
piechart.draw(data, pieoptions);
|
|
|
|
//Draw LineChart
|
|
linedata.addColumn('date', 'Date');
|
|
var userData = {};
|
|
_.forEach(json, function(set, idx) {
|
|
//only display 1/8 the points. (every 2 days instead of every 6 hours) page is loading too slow
|
|
//maybe i could add something to show more points but we're not losing too much granularity for the speed we gain
|
|
if(idx % 8 != 0) return;
|
|
_.forEach(set.data, function(point) {
|
|
if(point.du > 5000) { //the 'interesting' threshold is set at 5000kb
|
|
if(!userData[point.user]) { //if the current user has not been initialized yet
|
|
userData[point.user] = []; //create an empty array
|
|
var size = json.length;
|
|
while(size--) userData[point.user][size] = 0; //and populate it with zeros for the lenght of our entire set
|
|
linedata.addColumn('number', point.user); //then add a column of type 'number' for this user
|
|
|
|
}
|
|
userData[point.user][idx] = point.du; //add a point for this user
|
|
//if the last three data points are the same value
|
|
//if(idx > 16 && userData[point.user][idx] == userData[point.user][idx-8] && userData[point.user][idx-16]) {
|
|
// userData[point.user].splice(idx,1); //then get rid of the middle one
|
|
// if(point.user == '~vilmibm') {
|
|
// console.log('points', userData[point.user]);
|
|
// }
|
|
//}
|
|
}
|
|
})
|
|
})
|
|
_.forEach(json, function(set,idx) {
|
|
if(idx % 8 != 0) return;
|
|
var d = new Date(0);
|
|
d.setUTCSeconds(set.date);
|
|
linedata.addRow([d].concat(_.map(userData, function(user) { return user[idx];})));
|
|
});
|
|
console.log(linedata);
|
|
linechart.draw(linedata, lineoptions);
|
|
|
|
});
|
|
}
|
|
</script>
|
|
<body>
|
|
<div id="donutchart" style="width: 700px; height: 400px;"></div>
|
|
<div id="linechart" style="width: 1200px; height: 1200px;"></div>
|
|
</body>
|