Fix merge conflicts.

[xonotic/xonstat.git] / xonstat / templates / nvd3_damage.mako

diff --git a/xonstat/templates/nvd3_damage.mako b/xonstat/templates/nvd3_damage.mako
index 363cfc490c9820e56a94aba16bc9a3db8025d274..d6129224b774d74e936812f2ca959fdec26ea7f6 100644 (file)
--- a/xonstat/templates/nvd3_damage.mako
+++ b/xonstat/templates/nvd3_damage.mako
@@ -28,19 +28,72 @@ text {
 </style>
 </%block>
 
+<script src="/static/js/d3.v3.min.js"></script>
+
 <%block name="js">
 ${parent.js()}
 <script src="/static/js/d3.v3.js"></script>
 <script src="/static/js/nv.d3.min.js"></script>
 <script src="/static/js/weaponCharts.js"></script>
 <script>
+    var doDamageGraph = 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;
+        });
+
+    }
+
     % if game_type_cd is not None:
         d3.json("${request.route_url('player_weaponstats_data_json', id=player_id, _query={'limit':limit, 'game_type':game_type_cd})}", drawDamageChart);
     % else:
         d3.json("${request.route_url('player_weaponstats_data_json', id=player_id, _query={'limit':limit})}", drawDamageChart);
     % endif
 </script>
-
 </%block>
 
 <div class="row">