Miso Dataset Github Commit History Example

by iros

HTML

<script src="	 https://s3.amazonaws.com/static.bocoup.com/blog/miso.ds.deps.min.0.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
<div id="barChartContainer">
  Fetching Github Data...
</div>

CSS

body {
  background-color: #f7f7f7;
}
#barChartContainer {
  border: 1px solid #eee;
  margin: 10px;
  padding: 5px;
  background-color: #ffffff;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  border-radius: 5px;
}

JavaScript

var GH = {};

// to parse the incomming github data we are creating a custom parser
// to handle any future Github commit data.
GH.CommitsParser = function(options) {};

// a custom parser only needs extend the base Miso.Parsers.prototype
// and provide a parse method that takes in the data and returns
// an object containint a column name array and a data object
// containing the data for each column.
_.extend(GH.CommitsParser.prototype, Miso.Parsers.prototype, {
  parse : function(data) {

    // we really only want to grab a few data points from the entire
    // api call result.
    var columns     = ['sha', 'date', 'committer'],
        dataColumns = { sha : [], date : [], committer : [] };

    _.each(data, function(c) {
      dataColumns.sha.push(c.sha);
      dataColumns.date.push(c.commit.committer.date);
      dataColumns.committer.push(c.committer.login);
    });

    return {
      columns : columns,
      data    : dataColumns
    };
  }
});

var ds = new Miso.Dataset({
  url : 'https://api.github.com/repos/misoproject/dataset/commits?callback=',
  jsonp : true,
  // the extract method will be called once the import is done, before
  // we try to parse it because the github callback is actually under a 
  // property called 'data' in the response.
  extract : function(response) {
    return response.data;
  },
  parser : GH.CommitsParser,  
  columns : [
    { 
      name : 'date', 
      type : 'time', 
      
      // This is the format we're going to output the data from the
      // before function, NOT the incoming data. 
      format : 'YYYY-MM-DD', 
      
      // Before we actually parse the dates, let's roll them back to the
      // beginning of the week since we just want the count of commits
      // per week.
      before : function(date) {
        
        // this is the format the data actually comes in from github in.
        var incomingFormat = 'YYYY-MM-DDThh:mm:ssZZ';
        var d = moment(date, incomingFormat);

        // take...