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: 60},
  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   // get rid of empty values
  64   data.weapon_stats = data.weapon_stats.filter(function(e){ return e.fired > 0; });
  65
  66   // transform the dataset into something nvd3 can use
  67   var transformedData = d3.nest()
  68     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  69
  70   // transform games list into a map such that games[game_id] = linear sequence
  71   var games = {};
  72   data.games.forEach(function(v,i){ games[v] = i; });
  73
  74   // margin model
  75   var margin = {top: 20, right: 30, bottom: 30, left: 40},
  76       height = 300 - margin.top - margin.bottom;
  77
  78   width -= margin.left - margin.right;
  79
  80   // colors
  81   var colors = d3.scale.category20().domain(weapons);
  82   keyColor = function(d, i) {return colors(d.key)};
  83
  84   var chart;
  85   nv.addGraph(function() {
  86     chart = nv.models.lineChart()
  87       .margin(margin)
  88       .width(width)
  89       .height(height)
  90       .forceY([0,1])
  91       .x(function(d) { return games[d.game_id] })
  92       .y(function(d) {
  93         if(d.fired > 0) {
  94           return d.hit/d.fired;
  95         } else {
  96           return 0;
  97         }
  98       })
  99       .tooltip(function(key, x, y, e, graph) {
 100         return '<h3>' + key + '</h3>' + '<p>' +  y + ' accuracy in game #' + x + ' <br /> ' + data.averages[key]  + '% average</p>';
 101       })
 102       .color(keyColor);
 103
 104     chart.xAxis
 105       .axisLabel("Game ID")
 106       .showMaxMin(false)
 107       .ticks(5)
 108       .tickFormat(function(d) { return data.games[d]; });
 109
 110     var yScale = d3.scale.linear().domain([0,1]).range([0,height]);
 111     chart.yAxis
 112       .axisLabel('% Accuracy')
 113       .tickFormat(d3.format('2%'));
 114
 115     d3.select('#accuracyChartSVG')
 116       .datum(transformedData)
 117       .transition().duration(500).call(chart);
 118
 119     nv.utils.windowResize(chart.update);
 120
 121     return chart;
 122   });
 123 }