130 lines
5.4 KiB
HTML
130 lines
5.4 KiB
HTML
<html>
|
|
<head>
|
|
<title>Tilder Disk Usage</title>
|
|
<style>
|
|
body {
|
|
background-color: wheat;
|
|
}
|
|
</style>
|
|
</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"], callback: drawCharts});
|
|
//google.setOnLoadCallback(drawCharts);
|
|
function drawCharts() {
|
|
console.log('called 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.005,
|
|
backgroundColor: 'wheat'
|
|
};
|
|
var lineoptions = {
|
|
title: 'Tilder Disk Usage',
|
|
subtitle: 'over time',
|
|
vAxis: {
|
|
0: {title: 'kb'},
|
|
logScale: true
|
|
},
|
|
backgroundColor: 'wheat'
|
|
};
|
|
|
|
jQuery.getJSON("/~krowbar/data/du_log.json", function(json) {
|
|
console.log('loaded disk usage json data!');
|
|
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 = {};
|
|
var userInterest = {};
|
|
|
|
var cutoffDate = new Date(); cutoffDate.setMonth(cutoffDate.getMonth() - 6); cutoffDate = cutoffDate.getTime() / 1000; //the last 3 monthsa
|
|
var interestQuotent = 0.005;
|
|
|
|
_.forEach(json, function(set, idx) { //generate the 'interest quotent' for each user as a value of change
|
|
if(set.date < cutoffDate) return;
|
|
_.forEach(set.data, function(point) {
|
|
if(!userInterest[point.user]) {
|
|
userInterest[point.user] = { absChange: 0, lastValue: point.du, count: 1 };
|
|
} else {
|
|
userInterest[point.user].absChange = userInterest[point.user].absChange
|
|
+ Math.abs(point.du - userInterest[point.user].lastValue) / userInterest[point.user].lastValue;
|
|
userInterest[point.user].lastValue = point.du;
|
|
userInterest[point.user].count = userInterest[point.user].count + 1;
|
|
}
|
|
})
|
|
})
|
|
|
|
function isInteresting(point) {
|
|
if($("#onlyInteresting").is(":checked")) {
|
|
return userInterest[point.user].absChange / userInterest[point.user].count > interestQuotent;
|
|
} else {
|
|
return point.du > 5000; //the 'interesting' threshold is set at 5000kb
|
|
}
|
|
}
|
|
|
|
_.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 % 4 != 0 || set.date < cutoffDate) return;
|
|
_.forEach(set.data, function(point) {
|
|
if(isInteresting(point)) {
|
|
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 % 4 != 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>
|
|
<input id="onlyInteresting" type="checkbox" onClick="drawCharts()">Only Interesting Data</input>
|
|
<div id="linechart" style="width: 120%; height: 130%; margin-left: -10%"></div>
|
|
<div>
|
|
<a href="https://github.com/RussellChamp/tilde-projects/tree/master/Code/bash">(see source)</a>
|
|
</div>
|
|
</body>
|