Use the same weapon colors in the charts as in-game.

[xonotic/xonstat.git] / xonstat / static / js / weaponCharts.js

diff --git a/xonstat/static/js/weaponCharts.js b/xonstat/static/js/weaponCharts.js
index 470048822f09577dcb8e8309530b0923d05f9a6b..3586db78d2a6567f7c8e098eb2e5bce989898629 100644 (file)
--- a/xonstat/static/js/weaponCharts.js
+++ b/xonstat/static/js/weaponCharts.js
@@ -1,6 +1,13 @@
-var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "electro", "crylink",
-               "nex", "hagar", "rocketlauncher", "minstanex", "rifle",  "fireball",
-               "minelayer", "seeker", "tuba", "hlac", "hook", "porto"];
+// weapons and their corresponding colors
+var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "minelayer", "electro",
+    "crylink", "nex", "hagar", "rocketlauncher", "porto", "minstanex", "hook", "hlac",
+    "seeker", "rifle", "tuba", "fireball"];
+
+var weaponColors = ["#ff5933", "#b2b2b2", "#66e559", "#ff2600", "#bfbf00", "#597fff",
+    "#d83fff", "#00e5ff", "#d87f59", "#ffbf33", "#7fff7f", "#a5a5ff", "#a5ffd8",
+    "#ffa533", "#ff5959", "#d87f3f", "#d87f3f", "#33ff33"];
+
+var colorScale = d3.scale.ordinal().domain(weapons).range(weaponColors);
 
 var drawDamageChart = function(data) {
   // the chart should fill the "damageChart" div
@@ -21,8 +28,7 @@ var drawDamageChart = function(data) {
   width -= margin.left - margin.right;
 
   // colors
-  var colors = d3.scale.category20().domain(weapons);
-  keyColor = function(d, i) {return colors(d.key)};
+  keyColor = function(d, i) {return colorScale(d.key)};
 
   var chart;
   nv.addGraph(function() {
@@ -60,6 +66,9 @@ var drawAccuracyChart = function(data) {
   // the chart should fill the "accuracyChart" div
   var width = document.getElementById("accuracyChart").offsetWidth;
 
+  // get rid of empty values
+  data.weapon_stats = data.weapon_stats.filter(function(e){ return e.fired > 0; });
+
   // transform the dataset into something nvd3 can use
   var transformedData = d3.nest()
     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
@@ -75,8 +84,7 @@ var drawAccuracyChart = function(data) {
   width -= margin.left - margin.right;
 
   // colors
-  var colors = d3.scale.category20().domain(weapons);
-  keyColor = function(d, i) {return colors(d.key)};
+  keyColor = function(d, i) {return colorScale(d.key)};
 
   var chart;
   nv.addGraph(function() {
@@ -84,6 +92,7 @@ var drawAccuracyChart = function(data) {
       .margin(margin)
       .width(width)
       .height(height)
+      .forceY([0,1])
       .x(function(d) { return games[d.game_id] })
       .y(function(d) {
         if(d.fired > 0) {
@@ -92,6 +101,9 @@ var drawAccuracyChart = function(data) {
           return 0;
         }
       })
+      .tooltip(function(key, x, y, e, graph) {
+        return '<h3>' + key + '</h3>' + '<p>' +  y + ' accuracy in game #' + x + ' <br /> ' + data.averages[key]  + '% average</p>';
+      })
       .color(keyColor);
 
     chart.xAxis
@@ -100,6 +112,7 @@ var drawAccuracyChart = function(data) {
       .ticks(5)
       .tickFormat(function(d) { return data.games[d]; });
 
+    var yScale = d3.scale.linear().domain([0,1]).range([0,height]);
     chart.yAxis
       .axisLabel('% Accuracy')
       .tickFormat(d3.format('2%'));