xonstat/static/js/weaponCharts.js

   1 var weaponColors = ["#ff5933", "#b2b2b2", "#66e559", "#ff2600", "#bfbf00", "#597fff",
   2     "#d83fff", "#00e5ff", "#d87f59", "#ffbf33", "#7fff7f", "#a5a5ff", "#a5ffd8",
   3     "#ffa533", "#ff5959", "#d87f3f", "#d87f3f", "#33ff33"];
   4
   5 var drawDamageChart = function(data) {
   6   // the chart should fill the "damageChart" div
   7   var width = document.getElementById("damageChart").offsetWidth;
   8
   9   // transform the dataset into something nvd3 can use
  10   var transformedData = d3.nest()
  11     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  12
  13   // transform games list into a map such that games[game_id] = linear sequence
  14   var games = {};
  15   data.games.forEach(function(v,i){ games[v] = i; });
  16
  17   // margin model
  18   var margin = {top: 20, right: 30, bottom: 30, left: 60},
  19       height = 300 - margin.top - margin.bottom;
  20
  21   width -= margin.left - margin.right;
  22
  23   nv.addGraph(function() {
  24     chart = nv.models.stackedAreaChart()
  25       .margin(margin)
  26       .width(width)
  27       .height(height)
  28       .color(weaponColors)
  29       .x(function(d) { return games[d.game_id] })
  30       .y(function(d) { return d.actual })
  31       .useInteractiveGuideline(true)
  32       .controlsData(['Stacked','Expanded'])
  33       .tooltips(true)
  34       .tooltip(function(key, x, y, e, graph) {
  35         return '<h3>' + key + '</h3>' + '<p>' +  y + ' damage in game #' + x + '</p>';
  36       });
  37
  38     chart.xAxis.tickFormat(function(d) { return ''; });
  39     chart.yAxis.tickFormat(d3.format(',02d'));
  40
  41     d3.select('#damageChartSVG')
  42       .datum(transformedData)
  43       .transition().duration(500).call(chart);
  44
  45     nv.utils.windowResize(chart.update);
  46
  47     return chart;
  48   });
  49 }
  50
  51 var drawAccuracyChart = function(data) {
  52   // the chart should fill the "accuracyChart" div
  53   var width = document.getElementById("accuracyChart").offsetWidth;
  54
  55   // get rid of empty values
  56   data.weapon_stats = data.weapon_stats.filter(function(e){ return e.fired > 0; });
  57
  58   // transform the dataset into something nvd3 can use
  59   var transformedData = d3.nest()
  60     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  61
  62   var findNumGames = function(weapon) {
  63     var numGames = transformedData.filter(function(e){return e.key == weapon})[0].values.length;
  64     if(numGames !== undefined) {
  65         return numGames;
  66     } else {
  67         return 0;
  68     }
  69   };
  70
  71   // transform games list into a map such that games[game_id] = linear sequence
  72   var games = {};
  73   data.games.forEach(function(v,i){ games[v] = i; });
  74
  75   // margin model
  76   var margin = {top: 20, right: 30, bottom: 30, left: 40},
  77       height = 300 - margin.top - margin.bottom;
  78
  79   width -= margin.left - margin.right;
  80
  81   nv.addGraph(function() {
  82     chart = nv.models.lineChart()
  83       .margin(margin)
  84       .width(width)
  85       .height(height)
  86       .color(weaponColors)
  87       .forceY([0,1])
  88       .x(function(d) { return games[d.game_id] })
  89       .y(function(d) { return d.fired > 0 ? d.hit/d.fired : 0; })
  90       .useInteractiveGuideline(true)
  91       .tooltips(true)
  92       .tooltipContent(function(key, x, y, e, graph) {
  93         return '<h3>' + key + '</h3>' + '<p>' +  y + ' accuracy in game #' + x + ' <br /> ' + data.averages[key]  + '% average over ' + findNumGames(key) + ' games</p>';
  94       });
  95
  96     chart.xAxis.tickFormat(function(d) { return ''; });
  97
  98     var yScale = d3.scale.linear().domain([0,1]).range([0,height]);
  99     chart.yAxis
 100       .axisLabel('% Accuracy')
 101       .tickFormat(d3.format('2%'));
 102
 103     d3.select('#accuracyChartSVG')
 104       .datum(transformedData)
 105       .transition().duration(500).call(chart);
 106
 107     nv.utils.windowResize(chart.update);
 108
 109     return chart;
 110   });
 111 }