Skip to content

Commit 944da70

Browse files
dsjoergdsjoerg
committed
usable race selectors.
show the values of filter limits.
1 parent 200a78d commit 944da70

File tree

8 files changed

+274
-111
lines changed

8 files changed

+274
-111
lines changed

‎app/assets/javascripts/angular/controllers/scout.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
gg.controller('ScoutController', ['$scope', '$element', '$urlFilter',
3+
function ($scope, $element, $urlFilter) {
4+
$scope.race = '';
5+
$scope.filter = $urlFilter;
6+
$scope.vs_race = '';
7+
8+
$scope.filter.onChange = function(){
9+
console.log('onChange!');
10+
$scope.filter.apply($scope);
11+
$scope.refresh();
12+
}
13+
14+
$scope.refresh = function(params) {
15+
console.log('refresh!', params);
16+
}
17+
18+
19+
$scope.$watch('race + vs_race', function(v) {
20+
console.log('watch!');
21+
$scope.filter.params.race = $scope.race;
22+
$scope.filter.params.vs_race = $scope.vs_race;
23+
24+
if (_.isString($scope.race) && ($scope.race.length > 0)) {
25+
raceDim.filter($scope.race[0].toUpperCase());
26+
} else {
27+
raceDim.filterAll();
28+
}
29+
if (_.isString($scope.vs_race) && ($scope.vs_race.length > 0)) {
30+
oppRaceDim.filter($scope.vs_race[0].toUpperCase());
31+
} else {
32+
oppRaceDim.filterAll();
33+
}
34+
renderAll();
35+
});
36+
}
37+
]);

‎app/assets/javascripts/crossfilter.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -603,6 +603,7 @@ function crossfilter() {
603603
group: group,
604604
groupAll: groupAll,
605605
dispose: dispose,
606+
range: range,
606607
remove: dispose // for backwards-compatibility
607608
};
608609

@@ -777,6 +778,10 @@ function crossfilter() {
777778
return dimension;
778779
}
779780

781+
function range() {
782+
return [lo0, hi0];
783+
}
784+
780785
// Filters this dimension using the specified range, value, or null.
781786
// If the range is null, this is equivalent to filterAll.
782787
// If the range is an array, this is equivalent to filterRange.

‎app/assets/javascripts/scout.js‎

Lines changed: 91 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,32 @@ formatChange = d3.format("+,d"),
33
formatDate = d3.time.format("%B %d, %Y"),
44
formatTime = d3.time.format("%I:%M %p");
55

6+
// we will keep a list of filter objects
7+
// each filter object will have:
8+
// * dim: the crossfilter dimension object
9+
// * range: the currently filtered range, or null if nothing is currently applied
10+
11+
// currently filter settings get changed in the following places:
12+
// brush.chart calls dimension.filterRange(extent);
13+
// brushend.chart calls dimension.filterAll();
14+
// chart.filter() calls both of those
15+
// our race selectors call raceDim.filter(this.textContent) and oppRaceDim.filter(this.textContext)
16+
617
function render(method) {
718
d3.select(this).call(method);
819
}
920

1021
function renderAll() {
1122
chart.each(render);
23+
list.each(render);
1224
d3.select("#active").text(formatNumber(gr_all.value()));
13-
numWins = _.find(winGrp.all(), function(grp) {return grp.key}).value
25+
numWins = _.find(winGrp.all(), function(grp) {return grp.key == "true"}).value
1426
pctWins = Math.round(1000.0 * numWins / gr_all.value()) / 10.0;
15-
// console.log("wins:", numWins, pctWins);
27+
// console.log("wins:", numWins, pctWins);
1628
d3.select("#winrate").text(pctWins);
1729
}
1830

31+
// not currently used, was from the original crossfilter demo
1932
window.filter = function(filters) {
2033
filters.forEach(function(d, i) { charts[i].filter(d); });
2134
renderAll();
@@ -26,6 +39,24 @@ window.reset = function(i) {
2639
renderAll();
2740
};
2841

42+
function matchList(elem) {
43+
var gamerecordsByDate = dateDim.top(80);
44+
45+
elem.each(function() {
46+
var match = d3.select(this).selectAll(".match")
47+
.data(gamerecordsByDate);
48+
49+
var matchEnter = match.enter().append("tr").attr("class", "match");
50+
matchEnter.append("td").attr("class", "id").append("a");
51+
matchEnter.append("td").attr("class", "result");
52+
53+
match.exit().remove();
54+
55+
match.select('.id a').text(function(gr) { return gr.match.id });
56+
match.select('.id a').attr("href", function(gr) { return "http://ggtracker.com/matches/" + gr.match.id });
57+
match.select('.result').text(function(gr) { return gr.player.win == "true" ? "win" : "loss" });
58+
});
59+
}
2960

3061
function barChart() {
3162
if (!barChart.id) barChart.id = 0;
@@ -53,12 +84,29 @@ function barChart() {
5384

5485
// Create the skeletal chart.
5586
if (g.empty()) {
87+
// RESET link, hidden at first
5688
div.select(".title").append("a")
5789
.attr("href", "javascript:reset(" + id + ")")
5890
.attr("class", "reset")
91+
.attr("class", "filtered")
5992
.text("reset")
6093
.style("display", "none");
6194

95+
limits = div.select(".title").append("div")
96+
.attr("class", "filtered")
97+
.style("display", "none")
98+
.text("from ");
99+
100+
lower_limit = limits.append("span")
101+
.text("-")
102+
.attr("class", "lower");
103+
104+
limits.append("span").text(" to ");
105+
106+
upper_limit = limits.append("span")
107+
.text("-")
108+
.attr("class", "upper");
109+
62110
g = div.append("svg")
63111
.attr("width", width + margin.left + margin.right)
64112
.attr("height", height + margin.top + margin.bottom)
@@ -95,7 +143,7 @@ function barChart() {
95143
if (brushDirty) {
96144
brushDirty = false;
97145
g.selectAll(".brush").call(brush);
98-
div.select(".title a").style("display", brush.empty() ? "none" : null);
146+
div.selectAll(".title .filtered").style("display", brush.empty() ? "none" : null);
99147
if (brush.empty()) {
100148
g.selectAll("#clip-" + id + " rect")
101149
.attr("x", 0)
@@ -141,7 +189,7 @@ function barChart() {
141189

142190
brush.on("brushstart.chart", function() {
143191
var div = d3.select(this.parentNode.parentNode.parentNode);
144-
div.select(".title a").style("display", null);
192+
div.selectAll(".title .filtered").style("display", null);
145193
});
146194

147195
brush.on("brush.chart", function() {
@@ -155,12 +203,15 @@ function barChart() {
155203
.attr("x", x(extent[0]))
156204
.attr("width", x(extent[1]) - x(extent[0]));
157205
dimension.filterRange(extent);
206+
var div = d3.select(this.parentNode.parentNode.parentNode);
207+
div.select(".lower").text(Math.floor(extent[0]));
208+
div.select(".upper").text(Math.floor(extent[1]));
158209
});
159210

160211
brush.on("brushend.chart", function() {
161212
if (brush.empty()) {
162213
var div = d3.select(this.parentNode.parentNode.parentNode);
163-
div.select(".title a").style("display", "none");
214+
div.selectAll(".title .filtered").style("display", "none");
164215
div.select("#clip-" + id + " rect").attr("x", null).attr("width", "100%");
165216
dimension.filterAll();
166217
}
@@ -219,6 +270,28 @@ function barChart() {
219270
return d3.rebind(chart, brush, "on");
220271
};
221272

273+
function data_host() {
274+
return "http://localhost:3000";
275+
}
276+
277+
function debug_suffix() {
278+
debug = true;
279+
280+
if (debug) {
281+
return "_debug";
282+
} else {
283+
return "";
284+
}
285+
}
286+
287+
function matches_url() {
288+
return data_host() + "/matches" + debug_suffix() + ".csv";
289+
}
290+
291+
function entities_url() {
292+
return data_host() + "/ents" + debug_suffix() + ".csv";
293+
}
294+
222295
function scout_init() {
223296
var start = Date.now();
224297

@@ -230,15 +303,15 @@ function scout_init() {
230303

231304
entity_non_numerics = ["race", "chosen_race", "win"]
232305

233-
d3.csv("http://localhost:3000/matches.csv", function(error, csv_matches) {
306+
d3.csv(matches_url(), function(error, csv_matches) {
234307
csv_matches.forEach( function(match, index) {
235308
match.play_date = new Date(match.play_date);
236309
match.id = +match.id
237310
match.average_league = +match.average_league
238311
match.duration_minutes = +match.duration_minutes
239312
matches[match.id] = match
240313
});
241-
d3.csv("http://localhost:3000/ents.csv", function(error, csv_ents) {
314+
d3.csv(entities_url(), function(error, csv_ents) {
242315
csv_ents.forEach( function(entity, index) {
243316
for (var key in entity) {
244317
if (!(_.contains(entity_non_numerics, key))) {
@@ -278,7 +351,7 @@ function scout_init() {
278351
winGrp = winDim.group();
279352

280353
durDim = gr_cf.dimension(function(gr) { return Math.min(40, gr.match.duration_minutes) });
281-
durGrp = durDim.group(function(d) { return Math.floor(d / 5) * 5 });
354+
durGrp = durDim.group(function(d) { return d });
282355

283356
dateDim = gr_cf.dimension(function(gr) { return gr.match.play_date });
284357
dateGrp = dateDim.group();
@@ -290,10 +363,10 @@ function scout_init() {
290363
oasGrp = oasDim.group(function(d) { return Math.floor(d / 100) * 100 });
291364

292365
wsDim = gr_cf.dimension(function(gr) { return gr.player.w8 });
293-
wsGrp = wsDim.group(function(d) { return Math.floor(d / 5) * 5 });
366+
wsGrp = wsDim.group(function(d) { return d });
294367

295368
owsDim = gr_cf.dimension(function(gr) { return gr.opponent.w8 });
296-
owsGrp = owsDim.group(function(d) { return Math.floor(d / 5) * 5 });
369+
owsGrp = owsDim.group(function(d) { return d });
297370

298371
mb2Dim = gr_cf.dimension(function(gr) { return Math.floor(gr.player.miningbase_2 / 60) });
299372
mb2Grp = mb2Dim.group(function(d) { return d; })
@@ -333,28 +406,28 @@ function scout_init() {
333406
.group(wsGrp)
334407
.x(d3.scale.linear()
335408
.domain([0, 50])
336-
.rangeRound([0, 10 * 20])),
409+
.rangeRound([0, 10 * 15])),
337410

338411
barChart()
339412
.dimension(owsDim)
340413
.group(owsGrp)
341414
.x(d3.scale.linear()
342415
.domain([0, 50])
343-
.rangeRound([0, 10 * 20])),
416+
.rangeRound([0, 10 * 15])),
344417

345418
barChart()
346419
.dimension(mb2Dim)
347420
.group(mb2Grp)
348421
.x(d3.scale.linear()
349422
.domain([0, 15])
350-
.rangeRound([0, 10 * 20])),
423+
.rangeRound([0, 10 * 15])),
351424

352425
barChart()
353426
.dimension(omb2Dim)
354427
.group(omb2Grp)
355428
.x(d3.scale.linear()
356429
.domain([0, 15])
357-
.rangeRound([0, 10 * 20])),
430+
.rangeRound([0, 10 * 15])),
358431

359432
barChart()
360433
.dimension(durDim)
@@ -376,22 +449,13 @@ function scout_init() {
376449
.data(charts)
377450
.each(function(chart) { chart.on("brush", renderAll).on("brushend", renderAll); });
378451

452+
// Render the initial lists.
453+
list = d3.selectAll(".list tbody")
454+
.data([matchList]);
455+
379456
d3.selectAll("#total")
380457
.text(formatNumber(gr_cf.size()));
381458

382-
$("#player_race .selector").each( function(index, raceSelector) {
383-
$(raceSelector).click( function() {
384-
raceDim.filter(this.textContent);
385-
renderAll();
386-
})
387-
});
388-
$("#opponent_race .selector").each( function(index, raceSelector) {
389-
$(raceSelector).click( function() {
390-
oppRaceDim.filter(this.textContent);
391-
renderAll();
392-
})
393-
});
394-
395459
renderAll();
396460

397461
var end = Date.now();

‎app/assets/stylesheets/all.css.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@ $gray-dark: #1d1d1d;
111111
@import "controllers/users.css.scss";
112112
@import "controllers/replays.css.scss";
113113

114+
// scout
115+
@import "scout.css.scss";
116+
117+
114118
// LULZ
115119

116120
// it's CSS3 and animated gifs working in tandem.

‎app/assets/stylesheets/directives/filter.css.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131
// "inset" styling override for matches and players index
132132
// icon colors are being overridden in directives/select.css
133133

134-
#matches, #players, #spending {
134+
#matches, #players, #spending, #scout {
135135
div.filters-wrap {
136136
@include inset;
137137
margin-bottom: 15px;

‎app/assets/stylesheets/directives/select.css.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ $leagues: bronze, silver, gold, platinum, diamond, master, grandmaster;
4848

4949
// Colors on inset background
5050

51-
#matches, #players, #spending {
51+
#matches, #players, #spending, #scout {
5252
.filters-wrap {
5353
@for $i from 1 through length($leagues) {
5454
.leagueselect li .league-#{nth($leagues, $i)} { @extend .sc2-#{nth($leagues, $i)}-white-#{$ssize}; }

0 commit comments

Comments
 (0)