tilde-projects/public_html/du/index.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>