xonstat/static/js/weaponCharts.js

   1 var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "electro", "crylink",
   2                "nex", "hagar", "rocketlauncher", "minstanex", "rifle",  "fireball",
   3                "minelayer", "seeker", "tuba", "hlac", "hook", "porto"];
   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: 40},
  19       height = 300 - margin.top - margin.bottom;
  20
  21   width -= margin.left - margin.right;
  22
  23   // colors
  24   var colors = d3.scale.category20().domain(weapons);
  25   keyColor = function(d, i) {return colors(d.key)};
  26
  27   var chart;
  28   nv.addGraph(function() {
  29     chart = nv.models.stackedAreaChart()
  30       .margin(margin)
  31       .width(width)
  32       .height(height)
  33       .x(function(d) { return games[d.game_id] })
  34       .y(function(d) { return d.actual })
  35       .tooltip(function(key, x, y, e, graph) {
  36         return '<h3>' + key + '</h3>' + '<p>' +  y + ' damage in game #' + x + '</p>'
  37       })
  38       .color(keyColor);
  39
  40     chart.xAxis
  41       .axisLabel("Game ID")
  42       .showMaxMin(false)
  43       .ticks(5)
  44       .tickFormat(function(d) { return data.games[d]; });
  45
  46     chart.yAxis
  47       .tickFormat(d3.format(',02d'));
  48
  49     d3.select('#damageChartSVG')
  50       .datum(transformedData)
  51       .transition().duration(500).call(chart);
  52
  53     nv.utils.windowResize(chart.update);
  54
  55     return chart;
  56   });
  57 }
  58
  59 var drawAccuracyChart = function(data) {
  60   // the chart should fill the "accuracyChart" div
  61   var width = document.getElementById("accuracyChart").offsetWidth;
  62
  63   // transform the dataset into something nvd3 can use
  64   var transformedData = d3.nest()
  65     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  66
  67   // transform games list into a map such that games[game_id] = linear sequence
  68   var games = {};
  69   data.games.forEach(function(v,i){ games[v] = i; });
  70
  71   // margin model
  72   var margin = {top: 20, right: 30, bottom: 30, left: 40},
  73       height = 300 - margin.top - margin.bottom;
  74
  75   width -= margin.left - margin.right;
  76
  77   // colors
  78   var colors = d3.scale.category20().domain(weapons);
  79   keyColor = function(d, i) {return colors(d.key)};
  80
  81   var chart;
  82   nv.addGraph(function() {
  83     chart = nv.models.lineChart()
  84       .margin(margin)
  85       .width(width)
  86       .height(height)
  87       .x(function(d) { return games[d.game_id] })
  88       .y(function(d) {
  89         if(d.fired > 0) {
  90           return d.hit/d.fired;
  91         } else {
  92           return 0;
  93         }
  94       })
  95       .color(keyColor);
  96
  97     chart.xAxis
  98       .axisLabel("Game ID")
  99       .showMaxMin(false)
 100       .ticks(5)
 101       .tickFormat(function(d) { return data.games[d]; });
 102
 103     chart.yAxis
 104       .axisLabel('% Accuracy')
 105       .tickFormat(d3.format('2%'));
 106
 107     d3.select('#accuracyChartSVG')
 108       .datum(transformedData)
 109       .transition().duration(500).call(chart);
 110
 111     nv.utils.windowResize(chart.update);
 112
 113     return chart;
 114   });
 115 }