Skip to content

Commit 2ea6fcb

Browse files
dsjoergdsjoerg
committed
work in progress, trying highcharts now
1 parent 367beed commit 2ea6fcb

File tree

3 files changed

+155
-32
lines changed

3 files changed

+155
-32
lines changed

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

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,55 @@ gg.controller('ScoutController', ['$scope', '$element', '$urlFilter',
1515
console.log('refresh!', params);
1616
}
1717

18-
1918
$scope.$watch('race + vs_race', function(v) {
20-
console.log('watch!');
2119
$scope.filter.params.race = $scope.race;
2220
$scope.filter.params.vs_race = $scope.vs_race;
2321

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();
22+
if (typeof raceDim !== 'undefined') {
23+
if (_.isString($scope.race) && ($scope.race.length > 0)) {
24+
raceDim.filter($scope.race[0].toUpperCase());
25+
} else {
26+
raceDim.filterAll();
27+
}
28+
if (_.isString($scope.vs_race) && ($scope.vs_race.length > 0)) {
29+
oppRaceDim.filter($scope.vs_race[0].toUpperCase());
30+
} else {
31+
oppRaceDim.filterAll();
32+
}
33+
renderAll();
34+
}
35+
});
36+
37+
$scope.render = function() {
38+
var grp = asGrp.all();
39+
if (typeof grp !== 'undefined') {
40+
xyValues = _.map(grp, function (g) { return [g.key, g.value.value]; })
41+
$scope.chart.series[0].setData(xyValues);
3342
}
34-
renderAll();
43+
}
44+
45+
options = {
46+
chart: {
47+
type: "column",
48+
renderTo: $element.find('.canvas')[0],
49+
backgroundColor: "#F7F4EF",
50+
animation: false,
51+
margin: [20],
52+
width: 300,
53+
height: 150
54+
},
55+
title: {text: ""},
56+
legend: {enabled: false},
57+
xAxis: {labels: {enabled: true, style: {"fontFamily":"'Open Sans', verdana, arial, helvetica, sans-serif"}}},
58+
yAxis: {lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', labels: { enabled: false }, minorTickLength: 0, tickLength: 0, title: ''},
59+
credits: {'enabled':false},
60+
plotOptions: {"line":{"animation":false,"lineWidth":3,"marker":{"enabled":false, "radius":4, "symbol": "circle", "lineColor":"#111", "lineWidth":1, "fillColor":"#222", "states":{"hover":{"enabled":true}}},"shadow":false,"threshold":0}},
61+
subtitle: {}
62+
};
63+
options.series = [];
64+
$scope.chart = new Highcharts.Chart(options);
65+
$scope.chart.addSeries({
66+
data: [1]
3567
});
3668
}
3769
]);

‎app/assets/javascripts/scout.js‎

Lines changed: 109 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,72 @@ formatTime = d3.time.format("%I:%M %p");
1414
// chart.filter() calls both of those
1515
// our race selectors call raceDim.filter(this.textContent) and oppRaceDim.filter(this.textContext)
1616

17+
function reduceAddDJ(p, v) {
18+
++p.value;
19+
return p;
20+
}
21+
22+
function reduceRemoveDJ(p, v) {
23+
--p.value;
24+
return p;
25+
}
26+
27+
function reduceInitialDJ() {
28+
return {value:0};
29+
}
30+
31+
function reduceAddWinPct(p, v) {
32+
++p.games;
33+
if (v.player.win == "true") {
34+
++p.wins;
35+
}
36+
if (p.games == 0) {
37+
p.value = 0;
38+
} else {
39+
p.value = Math.round(1000.0 * p.wins / p.games) / 10.0;
40+
}
41+
return p;
42+
}
43+
44+
function reduceRemoveWinPct(p, v) {
45+
--p.games;
46+
if (v.player.win == "true") {
47+
--p.wins;
48+
}
49+
if (p.games == 0) {
50+
p.value = 0;
51+
} else {
52+
p.value = Math.round(1000.0 * p.wins / p.games) / 10.0;
53+
}
54+
return p;
55+
}
56+
57+
function reduceInitialWinPct() {
58+
return {games:0, wins:0, value:0};
59+
}
60+
61+
function orderValueDJ(p) {
62+
return p.value;
63+
}
64+
65+
function groupDJ(group) {
66+
return group.reduce(reduceAddDJ, reduceRemoveDJ, reduceInitialDJ).order(orderValueDJ);
67+
}
68+
69+
function groupWinPct(group) {
70+
return group.reduce(reduceAddWinPct, reduceRemoveWinPct, reduceInitialWinPct).order(orderValueDJ);
71+
}
72+
1773
function render(method) {
1874
d3.select(this).call(method);
1975
}
2076

2177
function renderAll() {
78+
$('#static').scope().render();
2279
chart.each(render);
2380
list.each(render);
2481
d3.select("#active").text(formatNumber(gr_all.value()));
25-
numWins = _.find(winGrp.all(), function(grp) {return grp.key == "true"}).value
82+
numWins = _.find(winGrp.all(), function(grp) {return grp.key == "true"}).value.value
2683
pctWins = Math.round(1000.0 * numWins / gr_all.value()) / 10.0;
2784
// console.log("wins:", numWins, pctWins);
2885
d3.select("#winrate").text(pctWins);
@@ -65,7 +122,8 @@ function barChart() {
65122
x,
66123
y = d3.scale.linear().range([100, 0]),
67124
id = barChart.id++,
68-
axis = d3.svg.axis().orient("bottom"),
125+
axis = d3.svg.axis().orient("bottom").ticks(4),
126+
// vaxis = d3.svg.axis().orient("left").ticks(4).scale(y),
69127
brush = d3.svg.brush(),
70128
brushDirty,
71129
dimension,
@@ -76,7 +134,12 @@ function barChart() {
76134
var width = x.range()[1],
77135
height = y.range()[0];
78136

79-
y.domain([0, group.top(1)[0].value]);
137+
var topValue = group.top(1)[0].value;
138+
if (_.has(topValue, "wins")) {
139+
y.domain([0, 100]);
140+
} else {
141+
y.domain([0, topValue.value]);
142+
}
80143

81144
div.each(function() {
82145
var div = d3.select(this),
@@ -113,11 +176,13 @@ function barChart() {
113176
.append("g")
114177
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
115178

179+
/** WHY IS THIS HERE
116180
g.append("clipPath")
117181
.attr("id", "clip-" + id)
118182
.append("rect")
119183
.attr("width", width)
120184
.attr("height", height);
185+
*/
121186

122187
g.selectAll(".bar")
123188
.data(["background", "foreground"])
@@ -133,6 +198,13 @@ function barChart() {
133198
.attr("transform", "translate(0," + height + ")")
134199
.call(axis);
135200

201+
/** Y AXIS WAS DISTRACTING AS IT CHANGED CONSTANTLY
202+
g.append("g")
203+
.attr("class", "axis")
204+
.attr("class", "vaxis")
205+
.attr("transform", "translate(" + width + ", 0)");
206+
*/
207+
136208
// Initialize the brush component with pretty resize handles.
137209
var gBrush = g.append("g").attr("class", "brush").call(brush);
138210
gBrush.selectAll("rect").attr("height", height);
@@ -157,16 +229,18 @@ function barChart() {
157229
}
158230

159231
g.selectAll(".bar").attr("d", barPath);
232+
// g.selectAll(".vaxis").call(vaxis);
160233
});
161234

162235
function barPath(groups) {
163236
var path = [],
164237
i = -1,
165238
n = groups.length,
239+
barwidth = Math.floor(width / n) + 1,
166240
d;
167241
while (++i < n) {
168242
d = groups[i];
169-
path.push("M", x(d.key), ",", height, "V", y(d.value), "h9V", height);
243+
path.push("M", x(d.key), ",", height, "V", y(d.value.value), "h", barwidth, "V", height);
170244
}
171245
return path.join("");
172246
}
@@ -234,6 +308,7 @@ function barChart() {
234308
chart.y = function(_) {
235309
if (!arguments.length) return y;
236310
y = _;
311+
vaxis.scale(y);
237312
return chart;
238313
};
239314

@@ -342,40 +417,42 @@ function scout_init() {
342417
gr_all = gr_cf.groupAll();
343418

344419
raceDim = gr_cf.dimension(function(gr) { return gr.player.race });
345-
raceGrp = raceDim.group();
420+
raceGrp = groupDJ(raceDim.group());
346421

347422
oppRaceDim = gr_cf.dimension(function(gr) { return gr.opponent.race });
348-
oppRaceGrp = oppRaceDim.group();
423+
oppRaceGrp = groupDJ(oppRaceDim.group());
349424

350425
winDim = gr_cf.dimension(function(gr) { return gr.player.win });
351-
winGrp = winDim.group();
426+
winGrp = groupDJ(winDim.group());
352427

353428
durDim = gr_cf.dimension(function(gr) { return Math.min(40, gr.match.duration_minutes) });
354-
durGrp = durDim.group(function(d) { return d });
429+
durGrp = groupWinPct(durDim.group(function(d) { return d }));
355430

356431
dateDim = gr_cf.dimension(function(gr) { return gr.match.play_date });
357-
dateGrp = dateDim.group();
432+
dateGrp = groupDJ(dateDim.group());
358433

359434
asDim = gr_cf.dimension(function(gr) { return gr.player.as8 });
360-
asGrp = asDim.group(function(d) { return Math.floor(d / 100) * 100 });
435+
asGrp = groupDJ(asDim.group(function(d) { return Math.floor(d / 100) * 100 }));
361436

362437
oasDim = gr_cf.dimension(function(gr) { return gr.opponent.as8 });
363-
oasGrp = oasDim.group(function(d) { return Math.floor(d / 100) * 100 });
438+
oasGrp = groupDJ(oasDim.group(function(d) { return Math.floor(d / 100) * 100 }));
364439

365440
wsDim = gr_cf.dimension(function(gr) { return gr.player.w8 });
366-
wsGrp = wsDim.group(function(d) { return d });
441+
wsGrp = groupDJ(wsDim.group(function(d) { return d }));
367442

368443
owsDim = gr_cf.dimension(function(gr) { return gr.opponent.w8 });
369-
owsGrp = owsDim.group(function(d) { return d });
444+
owsGrp = groupDJ(owsDim.group(function(d) { return d }));
370445

371446
mb2Dim = gr_cf.dimension(function(gr) { return Math.floor(gr.player.miningbase_2 / 60) });
372-
mb2Grp = mb2Dim.group(function(d) { return d; })
447+
mb2Grp = groupDJ(mb2Dim.group(function(d) { return d; }));
373448

374449
omb2Dim = gr_cf.dimension(function(gr) { return Math.floor(gr.opponent.miningbase_2 / 60) });
375-
omb2Grp = omb2Dim.group(function(d) { return d; })
450+
omb2Grp = groupDJ(omb2Dim.group(function(d) { return d; }));
376451

377452
lgDim = gr_cf.dimension(function(gr) { return gr.match.average_league });
378-
lgGrp = lgDim.group(function(d) { return d; });
453+
lgGrp = groupDJ(lgDim.group(function(d) { return d; }));
454+
455+
playerDim = gr_cf.dimension(function(gr) { return gr.player.identity_id });
379456

380457
var dims_built = Date.now();
381458

@@ -391,28 +468,28 @@ function scout_init() {
391468
.dimension(asDim)
392469
.group(asGrp)
393470
.x(d3.scale.linear()
394-
.domain([0, 2000])
471+
.domain([0, 2500])
395472
.rangeRound([0, 10 * 15])),
396473

397474
barChart()
398475
.dimension(oasDim)
399476
.group(oasGrp)
400477
.x(d3.scale.linear()
401-
.domain([0, 2000])
478+
.domain([0, 2500])
402479
.rangeRound([0, 10 * 15])),
403480

404481
barChart()
405482
.dimension(wsDim)
406483
.group(wsGrp)
407484
.x(d3.scale.linear()
408-
.domain([0, 50])
485+
.domain([0, 60])
409486
.rangeRound([0, 10 * 15])),
410487

411488
barChart()
412489
.dimension(owsDim)
413490
.group(owsGrp)
414491
.x(d3.scale.linear()
415-
.domain([0, 50])
492+
.domain([0, 60])
416493
.rangeRound([0, 10 * 15])),
417494

418495
barChart()
@@ -456,6 +533,18 @@ function scout_init() {
456533
d3.selectAll("#total")
457534
.text(formatNumber(gr_cf.size()));
458535

536+
$("#player_id").each( function(index, playerIdInput) {
537+
$(playerIdInput).change( function() {
538+
var playerId = $(this).val();
539+
if (playerId && playerId.length > 0) {
540+
playerDim.filter(playerId);
541+
} else {
542+
playerDim.filterAll();
543+
}
544+
renderAll();
545+
})
546+
});
547+
459548
renderAll();
460549

461550
var end = Date.now();

‎app/views/home/scout.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,10 @@
1818
</ul>
1919
</div>
2020

21+
<div><span>Player id:</span><input type="text" id="player_id"></input></div>
2122
<div><span id="winrate">-</span>% matches won.</div>
2223
<div><span id="active">-</span> of <span id="total">-</span> matches selected.</div>
24+
<div class="canvas"></div>
2325
<div id="charts">
2426
<div id="league-chart" class="chart">
2527
<div class="title">Game League</div>

0 commit comments

Comments
 (0)