BostonStatsBrowser

by yairamon

HTML

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>


<img src='https://scontent-atl3-1.xx.fbcdn.net/v/t31.0-8/13719679_10153637882316232_8223820550854875100_o.jpg?_nc_cat=101&_nc_eui2=AeFUqErHwdl7Z3x-Zcuuy2XE8CxFD53R2lS-NuciNdt3QiLbBp3dMNVim0AQ53-GQKHPFVwLOryPXW2ENAF-7-nptKGlv376b7c_WrBcak8OrQ&_nc_ht=scontent-atl3-1.xx&oh=8b542061d3493b9d013db3972821242e&oe=5C6D7933'
  height=100 width=300>

<h3>Survey Rankings </h3>
<h4 id="waitText"><i>... loading spreadsheets...</i></h4>


<form>

<select id="dataMonth">
      <option value="Nov">November</option>
      <option value="Oct">October</option>
      <option value="Sept">September</option>
      <option value="Aug">August</option>
      <option value="July">July</option>
</select>
<select id="dataType">
      <option value="Monthly">Monthly</option>
      <option value="Overall">Overall</option>
</select>
<select id="dataCategory">
      <option value="LOADING">Loading...</option>
</select>
<br>
  <input type="checkbox" id="multis" name="multis">
  <label for="multis">Include multi-accounters</label>


</form>
<br>

<div id="display"></div>

CSS

table {
  width: 22px;
}

th, td {
    border: 1px dotted gray;
}
 

th, td {
    padding-top:3px;
    padding-bottom:3px;
    padding-right:10px; 
    padding-left:10px; 
}

JavaScript

categories = {};
dataCategories = {};
detailedData = {};  // category -> [ [ign, team, #] ]

$(document).ready(function() {
  loadData();
	waitAndSetup();
});


function waitAndSetup() {
	if ( Object.keys(categories).length < 300 )
  	setTimeout(waitAndSetup, 400);
  else
  	setUp();
}

function setUp() {	
	$("#waitText").empty();


	$("#dataCategory").empty();
  //$("#yourSelect option[value='yourValue']").length > 0;
	for (i = 0; i < Object.keys(dataCategories).length; i++) {
    category = Object.keys(dataCategories)[i];
    $("#dataCategory").append("<option>" + category + "</option>");
  }
   
	  $("#dataType").val("Overall");
		$("#dataCategory").val("Collector");

   $("#dataMonth").change(showResults);
   $("#dataType").change(showResults);
   $("#dataCategory").change(showResults);
  	$("#multis").change(showResults);
    
  	showResults();
}


function showResults()  {
	$("#display").empty();
  $("#display").append("<table>");

	$("#display").append("<tr>");
  $("#display").append("<th>IGN");
  $("#display").append("<th>Result");

	category =  $("#dataMonth").val() + " " + $("#dataType").val() + " " + $("#dataCategory").val();

	results = detailedData[category];
  
  debugger;
  
  for (i = 0; i < results.length; i++ ) {
    [ign, team, num] = results[i];
    
    // Hall of Shame
    
    if (!$("#multis").prop('checked') &&
    	(
      	(ign.startsWith("Keepyo*")) ||
        (ign.startsWith("SOPlEPOOH*")) ||
        (ign.startsWith("Rehny")) ||
        (ign.startsWith("Shmuseph")) ||
        (ign.startsWith("PidgeyManning")) ||
        (ign.startsWith("Indigal2456")) ||
        (ign.startsWith("Lollersox*")) ||
        (ign.startsWith("Swimmath27")) ||
        false
      ))
    	continue;

		$("#display").append("<tr>");  
    
    color = "blue";
    if (team === "Valor") color = "red";
    else if (team === "Instinct") color = "orange";
    
	  $("#display").append("<td style='color:" + color + "'> " + ign);
    
		numStr = num.toString();
    if...