Tributary Inlet Leaderboard With more stats

_.md

[ Launch: Tributary Inlet Leaderboard With more stats ] 4567351 by enoex
[ Launch: Tributary Inlet Leaderboard With more stats ] 4563152 by enoex
[ Launch: Tributary Inlet Leaderboard (With # of tribs) ] 4563125 by enoex
[ Launch: Tributary Inlet Leaderboard ] 4563077 by enoex
[ Launch: Tributary Inlets ] 4562256 by poezn
[ Launch: Tributary Inlets ] 4561783 by enjalot
[ Launch: Tributary Inlets ] 4561743 by enjalot
[ Launch: Tributary Inlets ] 4549657 by enjalot
[ Launch: An inlet to Tributary ] 4545400 by enjalot

config.json

{"description":"Tributary Inlet Leaderboard With more stats","endpoint":"","display":"html","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":false,"vim":true,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.41525243309002435,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var display = d3.select("#display")
.style("overflow", "scroll");

var users_url = '/api/users';
var created_url = '/api/latest/created'

//grab the users
if(!tributary.users) {
   d3.json(users_url, function(err, res) {
     tributary.users = {};
     res.forEach(function(u) { 
       tributary.users[u.login] = u;
     })
     render();
  })
}


display.append("input")
.attr({
  id: "fetch",
  type: "button",
  value: "fetch"
})
.on("click", function() {
  d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
})


function render() {
  if(!tributary.inlets) return;
  
  var leaderboardData = _.chain(tributary.inlets)
    .groupBy(function(d, i) { return d.user.login })
    .map(function(inlets, id) { return { count: inlets.length, userId: id }})
    .sortBy(function(d, i) { return -1 * d.count})
    .value()
  ;
  
  var inletsSel = display.selectAll("div.inlet")
  	.data(leaderboardData);
  
  var inlets = inletsSel
    .enter()
    .append("div")
  .style({ 
    background: function(d, i){
       var background = 'rgba(100,150,200,0.2)';
      if(i < 3){ background = 'rgba(100,250,100,0.2)'; }
      return background;
    },
    border: '1px solid #363636',
    padding: '4px'
  })
    .classed("inlet", true)
  
  inlets
    .append("div")
    .classed('rank', true)
    .text(function(d, i) { 
      return i + 1 + "." })
  .style({
      "font-weight": function(d, i) {
        return i < 3 ? "bold" : "normal";
      }
    });

  
  inlets.append("img")
    .attr({
      src: function(d) { 
        if (tributary.users) {
          return tributary.users[d.userId].avatar_url;
        } else {
          return "";
        }
      },
      width: function(d, i) {
        return i < 3 ? 50 : 25;
      },
      height: function(d, i) {
        return i < 3 ? 50 : 25;
      }
    });

  inlets
  .append("div").attr({ 
    	id: function(d){ return 'userName_' + d.userId; }
  	})
  	.classed('userName', true)
    .classed('user', true)
    .text(function(d) { 
      
      	var that = this;
       $.ajax({
          url: "http://tributary.io/api/user/" + d.userId + "/latest",
          success: function(res){ 
              //console.log(res)
         		var forks = 0;
         		var visits = 0;
              	var tribs = res.length;
         		_.each(res, function(d){ 
                  //earlier data has no vists
                  visits += (d.visits ? d.visits : 0); 
                  forks += (d.nforks ? d.nforks : 0); 
       			});
      			//hacky add some spans for now
                $(that).html(
                  "<tspan style='font-weight: bold;>'>" + d.userId + "</tspan>"
                  + "<tspan style='font-size:0.9em;'>"
                  + ": " + tribs + " tributaries | " 
                  + visits + " visits | "
                  + forks + " forks "
                  + "</tspan>"
                );
        }
       });
      return d.userId 
      
    });
 
   
       
  
};
render();
if(!tributary.inlets || !tributary.inlets.length) {
   d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
}

style.css

#fetch {
  position:relative;
  margin-top: 20px;
  right: 40px;
  font-size:29px;
  float:right;
}

.inlet {
  margin-left: 10px;
  margin-top: 20px;
}

.inlet img {
  margin-right: 10px;
//  margin-top: 5px;
}

.inlet .user, .inlet .rank {
  display: inline;
}
    
.inlet .rank {
  margin-right: 10px;
  font-size: 20px;
}