84 lines
3.0 KiB
HTML
84 lines
3.0 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 > 2000) { //the 'interesting' threshold is set at 20000kb
|
|
if(!userData[point.user]) {
|
|
userData[point.user] = [];
|
|
var size = json.length;
|
|
while(size--) userData[point.user][size] = 0;
|
|
linedata.addColumn('number', point.user);
|
|
|
|
}
|
|
userData[point.user][idx] = point.du;
|
|
}
|
|
})
|
|
})
|
|
_.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>
|