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', 'Rifle');
  83   data.addColumn({type: 'string', role: 'tooltip'});
  84   data.addColumn('number', 'Arc');
  85   data.addColumn({type: 'string', role: 'tooltip'});
  86
  87   var flattened = flatten(weaponData);
  88
  89   for(i in weaponData.games) {
  90     var game_id = weaponData.games[i];
  91     var sg = accuracyValue(flattened[game_id], "shotgun");
  92     var sgTT = accuracyTooltip("shotgun", sg, weaponData.averages);
  93     var mg = accuracyValue(flattened[game_id], "machinegun");
  94     var mgTT = accuracyTooltip("machinegun", mg, weaponData.averages);
  95     var vortex = accuracyValue(flattened[game_id], "vortex");
  96     var vortexTT = accuracyTooltip("vortex", vortex, weaponData.averages);
  97     var mn = accuracyValue(flattened[game_id], "vaporizer");
  98     var mnTT = accuracyTooltip("vaporizer", mn, weaponData.averages);
  99     var rifle = accuracyValue(flattened[game_id], "rifle");
 100     var rifleTT = accuracyTooltip("rifle", rifle, weaponData.averages);
 101     var arc = accuracyValue(flattened[game_id], "arc");
 102     var arcTT = accuracyTooltip("arc", arc, weaponData.averages);
 103
 104     data.addRow([game_id.toString(), sg, sgTT, mg, mgTT, vortex,
 105             vortexTT, mn, mnTT, rifle, rifleTT, arc, arcTT]);
 106   }
 107
 108   var options = {
 109     backgroundColor: { fill: 'transparent' },
 110     lineWidth: 2,
 111     legend: {
 112       textStyle: { color: "#666" }
 113     },
 114     hAxis: {
 115       title: 'Games',
 116       textPosition: 'none',
 117       titleTextStyle: { color: '#666' }
 118     },
 119     vAxis: {
 120       title: 'Percentage',
 121       titleTextStyle: { color: '#666' },
 122       minValue: 0,
 123       maxValue: 100,
 124       baselineColor: '#333',
 125       gridlineColor: '#333',
 126       ticks: [20, 40, 60, 80, 100]
 127     },
 128     series: {
 129       0: { color: weaponColors["shotgun"] },
 130       1: { color: weaponColors["machinegun"] },
 131       2: { color: weaponColors["vortex"] },
 132       3: { color: weaponColors["vaporizer"] },
 133       4: { color: weaponColors["rifle"] },
 134       5: { color: weaponColors["arc"] }
 135     }
 136   };
 137
 138   var chart = new google.visualization.LineChart(document.getElementById('accuracyChart'));
 139
 140   // a click on a point sends you to that games' page
 141   var accuracySelectHandler = function(e) {
 142     var selection = chart.getSelection()[0];
 143     if (selection != null && selection.row != null) {
 144       var game_id = data.getFormattedValue(selection.row, 0);
 145       window.location.href = "http://stats.xonotic.org/game/" + game_id.toString();
 146     }
 147   };
 148   google.visualization.events.addListener(chart, 'select', accuracySelectHandler);
 149
 150   chart.draw(data, options);
 151 }
 152
 153 // Calculate the damage Y value for a given weapon stat
 154 function damageValue(gameWeaponStats, weapon) {
 155   if (gameWeaponStats[weapon] == undefined) {
 156     return null;
 157   }
 158   return gameWeaponStats[weapon].actual;
 159 }
 160
 161 // Calculate the damage tooltip text for a given weapon stat
 162 function damageTooltip(weapon, dmg) {
 163   if (dmg == null) {
 164     return null;
 165   }
 166   return weapon + ": " + dmg.toString() + " HP damage";
 167 }
 168
 169 // Draw the damage chart into the "damageChart" div id
 170 function drawDamageChart(weaponData) {
 171
 172   var data = new google.visualization.DataTable();
 173   data.addColumn('string', 'X');
 174   data.addColumn('number', 'Shotgun');
 175   data.addColumn({type: 'string', role: 'tooltip'});
 176   data.addColumn('number', 'Machine Gun');
 177   data.addColumn({type: 'string', role: 'tooltip'});
 178   data.addColumn('number', 'Vortex');
 179   data.addColumn({type: 'string', role: 'tooltip'});
 180   data.addColumn('number', 'Rifle');
 181   data.addColumn({type: 'string', role: 'tooltip'});
 182   data.addColumn('number', 'Mortar');
 183   data.addColumn({type: 'string', role: 'tooltip'});
 184   data.addColumn('number', 'Electro');
 185   data.addColumn({type: 'string', role: 'tooltip'});
 186   data.addColumn('number', 'Crylink');
 187   data.addColumn({type: 'string', role: 'tooltip'});
 188   data.addColumn('number', 'Hagar');
 189   data.addColumn({type: 'string', role: 'tooltip'});
 190   data.addColumn('number', 'Devastator');
 191   data.addColumn({type: 'string', role: 'tooltip'});
 192
 193   var flattened = flatten(weaponData);
 194
 195   for(i in weaponData.games) {
 196     var game_id = weaponData.games[i];
 197     var sg = damageValue(flattened[game_id], "shotgun");
 198     var sgTT = damageTooltip("shotgun", sg);
 199     var mg = damageValue(flattened[game_id], "machinegun");
 200     var mgTT = damageTooltip("machinegun", mg);
 201     var vortex = damageValue(flattened[game_id], "vortex");
 202     var vortexTT = damageTooltip("vortex", vortex);
 203     var mn = damageValue(flattened[game_id], "vaporizer");
 204     var mnTT = damageTooltip("vaporizer", mn);
 205     var rifle = damageValue(flattened[game_id], "rifle");
 206     var rifleTT = damageTooltip("rifle", rifle);
 207     var mortar = damageValue(flattened[game_id], "mortar");
 208     var mortarTT = damageTooltip("mortar", mortar);
 209     var electro = damageValue(flattened[game_id], "electro");
 210     var electroTT = damageTooltip("electro", electro);
 211     var crylink = damageValue(flattened[game_id], "crylink");
 212     var crylinkTT = damageTooltip("crylink", crylink);
 213     var hagar = damageValue(flattened[game_id], "hagar");
 214     var hagarTT = damageTooltip("hagar", hagar);
 215     var rl = damageValue(flattened[game_id], "devastator");
 216     var rlTT = damageTooltip("devastator", rl);
 217
 218     data.addRow([
 219       game_id.toString(),
 220       sg, sgTT,
 221       mg, mgTT,
 222       vortex, vortexTT,
 223       rifle, rifleTT,
 224       mortar, mortarTT,
 225       electro, electroTT,
 226       crylink, crylinkTT,
 227       hagar, hagarTT,
 228       rl, rlTT
 229     ]);
 230   }
 231
 232   var options = {
 233     backgroundColor: { fill: 'transparent' },
 234     legend: {
 235       position: 'top',
 236       maxLines: 3,
 237       textStyle: { color: "#666" }
 238     },
 239     vAxis: {
 240       title: 'HP Damage',
 241       titleTextStyle: {color: '#666'},
 242       baselineColor: '#333',
 243       gridlineColor: '#333',
 244     },
 245     hAxis: {
 246       title: 'Games',
 247       textPosition: 'none',
 248       titleTextStyle: { color: '#666' },
 249     },
 250     isStacked: true,
 251     series: {
 252       0: { color: weaponColors["shotgun"] },
 253       1: { color: weaponColors["machinegun"] },
 254       2: { color: weaponColors["vortex"] },
 255       3: { color: weaponColors["rifle"] },
 256       4: { color: weaponColors["mortar"] },
 257       5: { color: weaponColors["electro"] },
 258       6: { color: weaponColors["crylink"] },
 259       7: { color: weaponColors["hagar"] },
 260       8: { color: weaponColors["devastator"] }
 261     }
 262   };
 263
 264   var chart = new google.visualization.ColumnChart(document.getElementById('damageChart'));
 265
 266   // a click on a point sends you to that game's page
 267   var damageSelectHandler = function(e) {
 268     var selection = chart.getSelection()[0];
 269     if (selection != null && selection.row != null) {
 270       var game_id = data.getFormattedValue(selection.row, 0);
 271       window.location.href = "http://stats.xonotic.org/game/" + game_id.toString();
 272     }
 273   };
 274   google.visualization.events.addListener(chart, 'select', damageSelectHandler);
 275
 276   chart.draw(data, options);
 277 }