xonstat/static/js/weaponCharts.js

   1 // Colors assigned to the various weapons
   2 var weaponColors = {
   3   "laser": "#ff5933",
   4   "shotgun": "#1f77b4",
   5   "uzi": "#b9e659",
   6   "grenadelauncher": "#ff2600",
   7   "minelayer": "#bfbf00",
   8   "electro": "#597fff",
   9   "crylink": "#d940ff",
  10   "nex": "#00e6ff",
  11   "hagar": "#d98059",
  12   "rocketlauncher": "#ffbf33",
  13   "porto": "#7fff7f",
  14   "minstanex": "#d62728",
  15   "hook": "#a5ffd8",
  16   "hlac": "#ffa533",
  17   "seeker": "#ff5959",
  18   "rifle": "#9467bd",
  19   "tuba": "#d87f3f",
  20   "fireball": "#33ff33"
  21 };
  22
  23 // Flatten the existing weaponstats JSON requests
  24 // to ease indexing
  25 var flatten = function(weaponData) {
  26   flattened = {}
  27
  28   // each game is a key entry...
  29   weaponData.games.forEach(function(e,i) { flattened[e] = {}; });
  30
  31   // ... with indexes by weapon_cd
  32   weaponData.weapon_stats.forEach(function(e,i) { flattened[e.game_id][e.weapon_cd] = e; });
  33
  34   return flattened;
  35 }
  36
  37 // Calculate the Y value for a given weapon stat
  38 function accuracyValue(gameWeaponStats, weapon) {
  39   if (gameWeaponStats[weapon] == undefined) {
  40     return null;
  41   }
  42   var ws = gameWeaponStats[weapon];
  43   var pct = ws.fired > 0 ? Math.round((ws.hit / ws.fired) * 100) : 0;
  44
  45   return pct;
  46 }
  47
  48 // Calculate the tooltip text for a given weapon stat
  49 function accuracyTooltip(weapon, pct, averages) {
  50   if (pct == null) {
  51     return null;
  52   }
  53
  54   var tt = weapon + ": " + pct.toString() + "%";
  55   if (averages[weapon] != undefined) {
  56     return tt + " (" + averages[weapon].toString() + "% average)";
  57   }
  58
  59   return tt;
  60 }
  61
  62 // Draw the accuracy chart in the "accuracyChart" div id
  63 function drawAccuracyChart(weaponData) {
  64
  65   var data = new google.visualization.DataTable();
  66   data.addColumn('string', 'X');
  67   data.addColumn('number', 'Shotgun');
  68   data.addColumn({type: 'string', role: 'tooltip'});
  69   data.addColumn('number', 'Uzi');
  70   data.addColumn({type: 'string', role: 'tooltip'});
  71   data.addColumn('number', 'Nex');
  72   data.addColumn({type: 'string', role: 'tooltip'});
  73   data.addColumn('number', 'Minstanex');
  74   data.addColumn({type: 'string', role: 'tooltip'});
  75   data.addColumn('number', 'Rifle');
  76   data.addColumn({type: 'string', role: 'tooltip'});
  77
  78   var flattened = flatten(weaponData);
  79
  80   for(i in weaponData.games) {
  81     var game_id = weaponData.games[i];
  82     var sg = accuracyValue(flattened[game_id], "shotgun");
  83     var sgTT = accuracyTooltip("shotgun", sg, weaponData.averages);
  84     var uzi = accuracyValue(flattened[game_id], "uzi");
  85     var uziTT = accuracyTooltip("uzi", uzi, weaponData.averages);
  86     var nex = accuracyValue(flattened[game_id], "nex");
  87     var nexTT = accuracyTooltip("nex", nex, weaponData.averages);
  88     var mn = accuracyValue(flattened[game_id], "minstanex");
  89     var mnTT = accuracyTooltip("minstanex", mn, weaponData.averages);
  90     var rifle = accuracyValue(flattened[game_id], "rifle");
  91     var rifleTT = accuracyTooltip("rifle", rifle, weaponData.averages);
  92
  93     data.addRow([game_id.toString(), sg, sgTT, uzi, uziTT, nex,
  94             nexTT, mn, mnTT, rifle, rifleTT]);
  95   }
  96
  97   var options = {
  98     backgroundColor: { fill: 'transparent' },
  99     lineWidth: 2,
 100     legend: {
 101       textStyle: { color: "#666" }
 102     },
 103     hAxis: {
 104       title: 'Games',
 105       textPosition: 'none',
 106       titleTextStyle: { color: '#666' }
 107     },
 108     vAxis: {
 109       title: 'Percentage',
 110       titleTextStyle: { color: '#666' },
 111       minValue: 0,
 112       maxValue: 100,
 113       baselineColor: '#333',
 114       gridlineColor: '#333',
 115       ticks: [20, 40, 60, 80, 100]
 116     },
 117     series: {
 118       0: { color: weaponColors["shotgun"] },
 119       1: { color: weaponColors["uzi"] },
 120       2: { color: weaponColors["nex"] },
 121       3: { color: weaponColors["minstanex"] },
 122       4: { color: weaponColors["rifle"] }
 123     }
 124   };
 125
 126   var chart = new google.visualization.LineChart(document.getElementById('accuracyChart'));
 127
 128   // a click on a point sends you to that games' page
 129   var accuracySelectHandler = function(e) {
 130     var selection = chart.getSelection()[0];
 131     if (selection != null && selection.row != null) {
 132       var game_id = data.getFormattedValue(selection.row, 0);
 133       window.location.href = "http://stats.xonotic.org/game/" + game_id.toString();
 134     }
 135   };
 136   google.visualization.events.addListener(chart, 'select', accuracySelectHandler);
 137
 138   chart.draw(data, options);
 139 }
 140
 141 // Calculate the damage Y value for a given weapon stat
 142 function damageValue(gameWeaponStats, weapon) {
 143   if (gameWeaponStats[weapon] == undefined) {
 144     return null;
 145   }
 146   return gameWeaponStats[weapon].actual;
 147 }
 148
 149 // Calculate the damage tooltip text for a given weapon stat
 150 function damageTooltip(weapon, dmg) {
 151   if (dmg == null) {
 152     return null;
 153   }
 154   return weapon + ": " + dmg.toString() + " HP damage";
 155 }
 156
 157 // Draw the damage chart into the "damageChart" div id
 158 function drawDamageChart(weaponData) {
 159
 160   var data = new google.visualization.DataTable();
 161   data.addColumn('string', 'X');
 162   data.addColumn('number', 'Shotgun');
 163   data.addColumn({type: 'string', role: 'tooltip'});
 164   data.addColumn('number', 'Uzi');
 165   data.addColumn({type: 'string', role: 'tooltip'});
 166   data.addColumn('number', 'Nex');
 167   data.addColumn({type: 'string', role: 'tooltip'});
 168   data.addColumn('number', 'Rifle');
 169   data.addColumn({type: 'string', role: 'tooltip'});
 170   data.addColumn('number', 'Mortar');
 171   data.addColumn({type: 'string', role: 'tooltip'});
 172   data.addColumn('number', 'Electro');
 173   data.addColumn({type: 'string', role: 'tooltip'});
 174   data.addColumn('number', 'Crylink');
 175   data.addColumn({type: 'string', role: 'tooltip'});
 176   data.addColumn('number', 'Hagar');
 177   data.addColumn({type: 'string', role: 'tooltip'});
 178   data.addColumn('number', 'Rocket Launcher');
 179   data.addColumn({type: 'string', role: 'tooltip'});
 180
 181   var flattened = flatten(weaponData);
 182
 183   for(i in weaponData.games) {
 184     var game_id = weaponData.games[i];
 185     var sg = damageValue(flattened[game_id], "shotgun");
 186     var sgTT = damageTooltip("shotgun", sg);
 187     var uzi = damageValue(flattened[game_id], "uzi");
 188     var uziTT = damageTooltip("uzi", uzi);
 189     var nex = damageValue(flattened[game_id], "nex");
 190     var nexTT = damageTooltip("nex", nex);
 191     var mn = damageValue(flattened[game_id], "minstanex");
 192     var mnTT = damageTooltip("minstanex", mn);
 193     var rifle = damageValue(flattened[game_id], "rifle");
 194     var rifleTT = damageTooltip("rifle", rifle);
 195     var mortar = damageValue(flattened[game_id], "grenadelauncher");
 196     var mortarTT = damageTooltip("grenadelauncher", mortar);
 197     var electro = damageValue(flattened[game_id], "electro");
 198     var electroTT = damageTooltip("electro", electro);
 199     var crylink = damageValue(flattened[game_id], "crylink");
 200     var crylinkTT = damageTooltip("crylink", crylink);
 201     var hagar = damageValue(flattened[game_id], "hagar");
 202     var hagarTT = damageTooltip("hagar", hagar);
 203     var rl = damageValue(flattened[game_id], "rocketlauncher");
 204     var rlTT = damageTooltip("rocketlauncher", rl);
 205
 206     data.addRow([
 207       game_id.toString(),
 208       sg, sgTT,
 209       uzi, uziTT,
 210       nex, nexTT,
 211       rifle, rifleTT,
 212       mortar, mortarTT,
 213       electro, electroTT,
 214       crylink, crylinkTT,
 215       hagar, hagarTT,
 216       rl, rlTT
 217     ]);
 218   }
 219
 220   var options = {
 221     backgroundColor: { fill: 'transparent' },
 222     legend: {
 223       position: 'top',
 224       maxLines: 3,
 225       textStyle: { color: "#666" }
 226     },
 227     vAxis: {
 228       title: 'HP Damage',
 229       titleTextStyle: {color: '#666'},
 230       baselineColor: '#333',
 231       gridlineColor: '#333',
 232     },
 233     hAxis: {
 234       title: 'Games',
 235       textPosition: 'none',
 236       titleTextStyle: { color: '#666' },
 237     },
 238     isStacked: true,
 239     series: {
 240       0: { color: weaponColors["shotgun"] },
 241       1: { color: weaponColors["uzi"] },
 242       2: { color: weaponColors["nex"] },
 243       3: { color: weaponColors["rifle"] },
 244       4: { color: weaponColors["grenadelauncher"] },
 245       5: { color: weaponColors["electro"] },
 246       6: { color: weaponColors["crylink"] },
 247       7: { color: weaponColors["hagar"] },
 248       8: { color: weaponColors["rocketlauncher"] }
 249     }
 250   };
 251
 252   var chart = new google.visualization.ColumnChart(document.getElementById('damageChart'));
 253
 254   // a click on a point sends you to that game's page
 255   var damageSelectHandler = function(e) {
 256     var selection = chart.getSelection()[0];
 257     if (selection != null && selection.row != null) {
 258       var game_id = data.getFormattedValue(selection.row, 0);
 259       window.location.href = "http://stats.xonotic.org/game/" + game_id.toString();
 260     }
 261   };
 262   google.visualization.events.addListener(chart, 'select', damageSelectHandler);
 263
 264   chart.draw(data, options);
 265 }