Merge branch 'nvd3' of github.com:antzucaro/XonStat into nvd3
[xonotic/xonstat.git] / xonstat / templates / nvd3_damage.mako
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3
4 <link href="/static/css/nv.d3.css" rel="stylesheet" type="text/css">
5
6 <style>
7
8 body {
9   overflow-y:scroll;
10 }
11
12 text {
13   font: 12px sans-serif;
14 }
15
16 #damageChartSVG, #chart2 {
17   height: 500px;
18 }
19
20 </style>
21 <body>
22
23   <div id="damageChart">
24     <svg id="damageChartSVG"></svg>
25   </div>
26
27 <script src="/static/js/d3.v3.min.js"></script>
28 <script src="/static/js/nv.d3.min.js"></script>
29 <script>
30     var doDamageGraph = function(data){
31         // the chart should fill the "damageChart" div
32         var width = document.getElementById("damageChart").offsetWidth;
33
34         // transform the dataset into something nvd3 can use
35         var transformedData = d3.nest()
36             .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
37
38         // transform games list into a map such that games[game_id] = linear sequence
39         var games = {};
40         data.games.forEach(function(v,i){ games[v] = i; });
41
42         // margin model
43         var margin = {top: 20, right: 30, bottom: 30, left: 40},
44             height = 500 - margin.top - margin.bottom;
45
46         width -= margin.left - margin.right;
47
48         // colors
49         var colors = d3.scale.category20();
50         keyColor = function(d, i) {return colors(d.key)};
51
52         var chart;
53         nv.addGraph(function() {
54           chart = nv.models.stackedAreaChart()
55                         .margin(margin)
56                         .width(width)
57                         .height(height)
58                         .x(function(d) { return games[d.game_id] })
59                         .y(function(d) { return d.actual })
60                         .color(keyColor);
61
62           chart.xAxis
63               .axisLabel("Game ID")
64               .showMaxMin(false)
65               .ticks(5)
66               .tickFormat(function(d) { return data.games[d]; });
67
68           chart.yAxis
69               .tickFormat(d3.format(',02d'));
70
71           d3.select('#damageChartSVG')
72             .datum(transformedData)
73               .transition().duration(500).call(chart);
74
75           nv.utils.windowResize(chart.update);
76
77           return chart;
78         });
79
80     }
81
82     % if game_type_cd is not None:
83         d3.json("${request.route_url('player_damage_data_v2', id=player_id, _query={'limit':limit, 'game_type':game_type_cd})}", doDamageGraph);
84     % else:
85         d3.json("${request.route_url('player_damage_data_v2', id=player_id, _query={'limit':limit})}", doDamageGraph);
86     % endif
87 </script>