xonstat/static/js/weaponCharts.js

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