xonstat/static/js/weaponCharts.js

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