From: Ant Zucaro Date: Sat, 7 Sep 2013 23:13:32 +0000 (-0400) Subject: Use the same colors for weapons each time. X-Git-Url: https://git.rm.cloudns.org/?a=commitdiff_plain;h=861fe3d7736d9d1a302791f9099f84c05c00a4a4;p=xonotic%2Fxonstat.git Use the same colors for weapons each time. --- diff --git a/xonstat/static/js/weaponCharts.js b/xonstat/static/js/weaponCharts.js index 9977c4a..f4b0c2f 100644 --- a/xonstat/static/js/weaponCharts.js +++ b/xonstat/static/js/weaponCharts.js @@ -1,50 +1,54 @@ - var drawDamageChart = function(data) { - // the chart should fill the "damageChart" div - var width = document.getElementById("damageChart").offsetWidth; - - // transform the dataset into something nvd3 can use - var transformedData = d3.nest() - .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats); - - // transform games list into a map such that games[game_id] = linear sequence - var games = {}; - data.games.forEach(function(v,i){ games[v] = i; }); - - // margin model - var margin = {top: 20, right: 30, bottom: 30, left: 40}, - height = 500 - margin.top - margin.bottom; - - width -= margin.left - margin.right; - - // colors - var colors = d3.scale.category20(); - keyColor = function(d, i) {return colors(d.key)}; - - var chart; - nv.addGraph(function() { - chart = nv.models.stackedAreaChart() - .margin(margin) - .width(width) - .height(height) - .x(function(d) { return games[d.game_id] }) - .y(function(d) { return d.actual }) - .color(keyColor); - - chart.xAxis - .axisLabel("Game ID") - .showMaxMin(false) - .ticks(5) - .tickFormat(function(d) { return data.games[d]; }); - - chart.yAxis - .tickFormat(d3.format(',02d')); - - d3.select('#damageChartSVG') - .datum(transformedData) - .transition().duration(500).call(chart); - - nv.utils.windowResize(chart.update); - - return chart; - }); - } +var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "electro", "crylink", + "nex", "hagar", "rocketlauncher", "minstanex", "rifle", "fireball", + "minelayer", "seeker", "tuba", "hlac", "hook", "porto"]; + +var drawDamageChart = function(data) { + // the chart should fill the "damageChart" div + var width = document.getElementById("damageChart").offsetWidth; + + // transform the dataset into something nvd3 can use + var transformedData = d3.nest() + .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats); + + // transform games list into a map such that games[game_id] = linear sequence + var games = {}; + data.games.forEach(function(v,i){ games[v] = i; }); + + // margin model + var margin = {top: 20, right: 30, bottom: 30, left: 40}, + height = 500 - margin.top - margin.bottom; + + width -= margin.left - margin.right; + + // colors + var colors = d3.scale.category20().domain(weapons); + keyColor = function(d, i) {return colors(d.key)}; + + var chart; + nv.addGraph(function() { + chart = nv.models.stackedAreaChart() + .margin(margin) + .width(width) + .height(height) + .x(function(d) { return games[d.game_id] }) + .y(function(d) { return d.actual }) + .color(keyColor); + + chart.xAxis + .axisLabel("Game ID") + .showMaxMin(false) + .ticks(5) + .tickFormat(function(d) { return data.games[d]; }); + + chart.yAxis + .tickFormat(d3.format(',02d')); + + d3.select('#damageChartSVG') + .datum(transformedData) + .transition().duration(500).call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + }); +}