dashboard: add graph score

dashboard/static/js/dashboard.js

@@ -167,4 +167,127 @@ angular.module("FICApp", ["ngSanitize", "ngAnimate"])
 	$http.get("/api/teams/" + $scope.team.id + "/stats.json").then(function(response) {
 	    $scope.mystats = response.data;
 	});
+    })
+  .controller("RankGraphController", function($scope, $q) {
+	var margin = {left: 50, right: 20, top: 20, bottom: 50 };
+
+        var width = $("#rank_graph").width() - margin.left - margin.right;
+	var height = $scope.s.params.height - margin.top - margin.bottom;
+
+	var xNudge = 50;
+	var yNudge = 20;
+
+      var max = 0;
+    var minDate = new Date();
+    var maxDate = new Date("2017-12-01");
+    if ($scope.settings && $scope.settings.end)
+      maxDate = $scope.settings.end;
+
+
+      var teams = {}
+
+    var loopPromises = [];
+    $scope.s.params.teams.forEach(function (teamid) {
+      var deferred = $q.defer();
+      loopPromises.push(deferred.promise);
+      d3.json("api/teams/" + teamid + "/score-grid.json", function (rows) {
+	if (rows == null) return;
+	rows.sort(function (a,b) { return a.time > b.time ? 1 : -1 })
+	var nrows = {};
+	var sum = 0;
+	rows.forEach(function (row) {
+	  if (!nrows[row.time])
+	    nrows[row.time] = 0;
+	  var pts = row.points * row.coeff;
+	  sum += pts;
+	  nrows[row.time] = sum;
+	  if (sum > max)
+	    max = sum
+	})
+	teams[teamid] = []
+	Object.keys(nrows).forEach(function (t) {
+	  var d = new Date(t)
+	  if (d < minDate)
+	    minDate = d;
+	  if (d > maxDate)
+	    maxDate = d;
+	  teams[teamid].push({time: d, points: nrows[t]})
+	})
+	deferred.resolve();
+      });
+    })
+
+    $q.all(loopPromises).then(function(){
+      var y = d3.scale.linear()
+	  .domain([0,max])
+	  .range([height,0]);
+
+      var x = d3.time.scale()
+	  .domain([minDate,maxDate])
+	  .range([0,width]);
+
+      var yAxis = d3.svg.axis()
+	  .orient("left")
+	  .scale(y);
+
+      var xAxis = d3.svg.axis()
+	  .orient("bottom")
+	  .tickFormat(d3.time.format("%H:%M"))
+	  .scale(x);
+
+      var line = d3.svg.line()
+	  .x(function(d){ return x(d.time); })
+	  .y(function(d){ return y(d.points); })
+	  .interpolate("cardinal");
+
+      var svg = d3.select("#rank_graph").append("svg").attr("id","svg").attr("height",$scope.s.params.height).attr("width","100%");
+      var chartGroup = svg.append("g").attr("class","chartGroup").attr("transform","translate("+xNudge+","+yNudge+")");
+
+      chartGroup.append("g")
+	.attr("class","axis x")
+	.attr("transform","translate(0,"+height+")")
+	.call(xAxis);
+
+      chartGroup.append("g")
+	.attr("class","axis y")
+	.call(yAxis);
+
+      angular.forEach(teams, function(rows, tid) {
+	var team = $scope.teams[tid]
+	chartGroup.append("path")
+	  .attr("style","fill: none; stroke: " + team.color + "; stroke-width: 2px;")
+	  .attr("d",function(d){ return line(rows); })
+      })
+
+      if ($scope.s.params.legend) {
+	var legend = svg.append("g")
+            .attr("style", "fill: white;")
+            .attr("height", 100)
+            .attr("width", 100)
+            .attr('transform', 'translate(70,20)')
+
+	legend.selectAll('rect')
+          .data(Object.keys(teams))
+          .enter()
+          .append("rect")
+          .attr("x", 0)
+          .attr("y", function(d, i){ return i * 23;})
+          .attr("width", 15)
+          .attr("height", 15)
+          .style("fill", function(d) {
+	    return $scope.teams[d].color;
+	  })
+
+	legend.selectAll('text')
+          .data(Object.keys(teams))
+          .enter()
+          .append("text")
+          .attr("font-size", "23px")
+          .attr("x", 20)
+          .attr("y", function(d, i){ return i *  23 + 14;})
+          .text(function(d) {
+	    return $scope.teams[d].name + " (" + $scope.teams[d].rank + "e : " + Math.ceil($scope.teams[d].score) + " pts)";
+	  });
+      }
     });
+  })