| 271 | } |
| 272 | |
| 273 | generateHistogram (histogramElement, histogramData, teamName) { |
| 274 | // renders twice, hack fix |
| 275 | let session |
| 276 | if ($('#' + histogramElement.attr('id')).has('svg').length) { return } |
| 277 | if (!histogramData.length) { return histogramElement.hide() } |
| 278 | histogramData = histogramData.map(d => scoreForDisplay(d)) |
| 279 | |
| 280 | const margin = { |
| 281 | top: 20, |
| 282 | right: 20, |
| 283 | bottom: 30, |
| 284 | left: 15 |
| 285 | } |
| 286 | |
| 287 | const width = 470 - margin.left - margin.right |
| 288 | const height = 125 - margin.top - margin.bottom |
| 289 | |
| 290 | const formatCount = d3.format(',.0') |
| 291 | |
| 292 | const axisFactor = 1000 |
| 293 | const minX = Math.floor(Math.min(...Array.from(histogramData || [])) / axisFactor) * axisFactor |
| 294 | const maxX = Math.ceil(Math.max(...Array.from(histogramData || [])) / axisFactor) * axisFactor |
| 295 | const x = d3.scale.linear().domain([minX, maxX]).range([0, width]) |
| 296 | const data = d3.layout.histogram().bins(x.ticks(20))(histogramData) |
| 297 | const y = d3.scale.linear().domain([0, d3.max(data, d => d.y)]).range([height, 10]) |
| 298 | |
| 299 | // create the x axis |
| 300 | const xAxis = d3.svg.axis().scale(x).orient('bottom').ticks(5).outerTickSize(0) |
| 301 | |
| 302 | const svg = d3.select('#' + histogramElement.attr('id')).append('svg') |
| 303 | .attr('width', width + margin.left + margin.right) |
| 304 | .attr('height', height + margin.top + margin.bottom) |
| 305 | .append('g') |
| 306 | .attr('transform', `translate(${margin.left}, ${margin.top})`) |
| 307 | let barClass = 'bar' |
| 308 | if (teamName.toLowerCase() === 'ogres') { barClass = 'ogres-bar' } |
| 309 | if (teamName.toLowerCase() === 'humans') { barClass = 'humans-bar' } |
| 310 | |
| 311 | const bar = svg.selectAll('.bar') |
| 312 | .data(data) |
| 313 | .enter().append('g') |
| 314 | .attr('class', barClass) |
| 315 | .attr('transform', d => `translate(${x(d.x)}, ${y(d.y)})`) |
| 316 | |
| 317 | bar.append('rect') |
| 318 | .attr('x', 1) |
| 319 | .attr('width', width / 20) |
| 320 | .attr('height', d => height - y(d.y)) |
| 321 | if (session = this.leaderboards[teamName].session) { |
| 322 | let playerScore |
| 323 | if (this.options.league) { |
| 324 | playerScore = (__guard__(_.find(session.get('leagues'), { leagueID: this.options.league.id }), x1 => x1.stats.totalScore) || 10) |
| 325 | } else { |
| 326 | playerScore = session.get('totalScore') |
| 327 | } |
| 328 | playerScore = scoreForDisplay(playerScore) |
| 329 | const scorebar = svg.selectAll('.specialbar') |
| 330 | .data([playerScore]) |