diff --git a/index.css b/index.css
index 8bd29a0..f122c4a 100644
--- a/index.css
+++ b/index.css
@@ -36,7 +36,7 @@
table-layout: fixed;
}
-td {
+.analysis-cell {
vertical-align: top;
width: 1%;
padding: 15px;
diff --git a/index.html b/index.html
index bc6956b..0709b95 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,18 @@
-
+
+
+
+
+
+
+
+
+
+
@@ -26,16 +35,16 @@
Self:
-
-
+
+
Allies:
-
-
+
+
Enemies:
-
-
+
+
@@ -67,26 +76,26 @@
- |
+ |
|
-
+ |
|
- |
+ |
|
-
+ |
|
- |
+ |
|
-
+ |
|
diff --git a/index.js b/index.js
index a2d3772..4b37471 100644
--- a/index.js
+++ b/index.js
@@ -295,8 +295,7 @@ function createChampionMap(data) {
}
function drawChampionSelectFilter(componentName) {
- var select = d3.select(componentName)
- .on('change', updateMap);
+ var select = d3.select(componentName);
var championArray = [];
Object.keys(championData).forEach(function(k){
@@ -307,28 +306,45 @@ function drawChampionSelectFilter(componentName) {
return d3.ascending(x.name, y.name);
});
- sortedData.unshift({name: "All champions", id: 0});
var options = select
.selectAll('option')
.data(sortedData)
.enter()
.append('option')
.text(d => d.name)
- .attr('value', d => d.key)
+ .attr('value', d => d.key);
+
+ $(componentName).multiselect({
+ includeSelectAllOption: true,
+ selectAllText: "All Champions",
+ onSelectAll: updateMap,
+ onDeselectAll: updateMap,
+ onChange: updateMap,
+ maxHeight: 200,
+ enableCaseInsensitiveFiltering: true
+ });
}
function drawRoleSelectFilter(componentName) {
- var select = d3.select(componentName)
- .on('change', updateMap);
+ var select = d3.select(componentName);
- var roleArray = ["All roles", "Top", "Jungle", "Mid", "ADC", "Support"];
+ var roleArray = ["Top", "Jungle", "Mid", "ADC", "Support"];
var options = select
.selectAll('option')
.data(roleArray)
.enter()
.append('option')
.text(d => d)
- .attr('value', d => d)
+ .attr('value', d => d);
+
+ $(componentName).multiselect({
+ includeSelectAllOption: true,
+ selectAllText: "All Roles",
+ onSelectAll: updateMap,
+ onDeselectAll: updateMap,
+ onChange: updateMap,
+ enableCaseInsensitiveFiltering: true
+ });
}
function drawRoleAndChampionFilters(championSelectName, roleSelectName) {
@@ -419,8 +435,15 @@ function getMatchDetails(datum) {
function filterByRoles(datum, roles, participantId) {
let details = getMatchDetails(datum).participantDetails[participantId];
- return (roles[0] === "All roles" ||
- roles.includes(getRole(details.role, details.lane)));
+ if (roles.length === 0 || roles[0].value === "All roles") {
+ return true;
+ }
+ for (let i = 0; i < roles.length; i++) {
+ if (roles[i].value === getRole(details.role, details.lane)) {
+ return true;
+ }
+ }
+ return false;
}
function filterGenericEvents(datum, champions, roles) {
@@ -490,11 +513,11 @@ function filterAssistsByParticipatingAllies(datum, allyChampions, allyRoles) {
}
function getSelectedChampions(componentName) {
- return [d3.select(componentName).node().value];
+ return $(componentName + " option:selected");
}
function getSelectedRoles(componentName) {
- return [d3.select(componentName).node().value];
+ return $(componentName + " option:selected");
}
function updateMap() {
@@ -587,13 +610,13 @@ function filterByTime(datum) {
function filterByChampions(datum, champions, participantId) {
let details = getMatchDetails(datum);
- if (champions[0] === "All champions") {
+ if (champions.length === 0 || champions[0].innerText === "All champions") {
return true;
}
else {
let championPlayed = details.participantDetails[participantId].championId;
- for (let i in champions) {
- if(championData[champions[i]].id === championPlayed) {
+ for (let i = 0; i < champions.length; i++) {
+ if(championData[champions[i].value].id === championPlayed) {
return true;
}
}
diff --git a/package-lock.json b/package-lock.json
index 092c11e..b94fc00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -274,6 +274,16 @@
"hoek": "2.16.3"
}
},
+ "bootstrap": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
+ "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+ },
+ "bootstrap-multiselect": {
+ "version": "0.9.13-1",
+ "resolved": "https://registry.npmjs.org/bootstrap-multiselect/-/bootstrap-multiselect-0.9.13-1.tgz",
+ "integrity": "sha1-LFfO4mCxjX8BpO3Z1l8l3wQl/So="
+ },
"brace-expansion": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
diff --git a/package.json b/package.json
index 30cf409..5879632 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,8 @@
"dependencies": {
"@blueprintjs/core": "^1.33.0",
"axios": "^0.16.2",
+ "bootstrap": "^3.3.7",
+ "bootstrap-multiselect": "^0.9.13-1",
"express": "^4.16.2",
"handlebars": "^4.0.11",
"react": "^16.1.1",
diff --git a/server.js b/server.js
index 9d3de0f..f5d1628 100644
--- a/server.js
+++ b/server.js
@@ -8,9 +8,9 @@ let express = require('express');
let app = express();
let fs = require('fs');
-const port = 8080;
+const port = 8082;
let baseURL = 'https://na1.api.riotgames.com/lol/';
-let apiKey = 'RGAPI-dce505ed-21a4-4809-89c8-1ccc16ac1bfb';
+let apiKey = 'RGAPI-39f977f6-d666-4fc0-9c90-c61e53913c6e';
const queues = {2: "5v5 Blind Pick",
4: "5v5 Ranked Solo",
@@ -53,7 +53,7 @@ app.listen(port, function () {
//prefetchFavoritesTimelinesData(); // these at same time because asynchronous
//prefetchMasterLeagueMatchListData();
- prefetchTimelinesAndDetailsData();
+ //prefetchTimelinesAndDetailsData();
console.log(`Server running at http://localhost:${port}/`)
});