ajout d'un graphe velocités prévue/réelle

main/templates/reports/report_sprints.html

@@ -1,50 +1,94 @@
-{% extends '_layout.html' %}
-
-{% block title %}
-	Rapport: Sprints
-{% endblock %}
-
-{% block breadcrumb %}
-	<li><a href="{% url 'index' %}">Accueil</a></li>
-	<li><a href="{% url 'reports' %}">Rapports</a></li>
-	<li><a>Les Sprints</a></li>
-{% endblock %}
-
-{% block main %}
-{% load martortags %}
-
-<section id="backlog">
-	<header>
-		<div class="flex-row">
-			<h2 class="flex-extend">Les Sprints</h2>
-		</div>
-	</header>
-	
-	<ul class="sprints-list">
-	{% for sprint in sprints %}
-		<li class="sprint-li">
-			<div class="flex-col">
-			
-				<div class="flex-row">
-					<h4>Sprint #{{ sprint.id }} : {{ sprint.date_start|date:"d M. Y" }} au {{ sprint.date_end|date:"d M. Y" }}</h4>
-					{% if sprint.running %}<span class="running" style="margin-left: 14px;">En cours</span>{% endif %}
-				</div>
-				
-				<div class="flex-row flex-space-around" style="margin-bottom: 20px;">
-					<b>Stories programmées: <a href="{% url 'story_index' %}?sprint={{ sprint.id }}">{{ sprint.nb_stories }}</a> </b>
-					<b>Vélocité prévue: {{ sprint.planned_velocity }} </b>
-					<b>Vélocité réelle: {{ sprint.real_velocity }} </b>
-				</div>
-				
-				{% if sprint.retro %}
-				<div style="padding: 0 20px;">
-					{{ sprint.retro|safe_markdown }}
-				</div>
-				{% endif %}
-			</div>
-		</li>
-	{% endfor %}
-	</ul>
-	
-</section>
+{% extends '_layout.html' %}
+
+{% block title %}
+	Rapport: Sprints
+{% endblock %}
+
+{% block breadcrumb %}
+	<li><a href="{% url 'index' %}">Accueil</a></li>
+	<li><a href="{% url 'reports' %}">Rapports</a></li>
+	<li><a>Les Sprints</a></li>
+{% endblock %}
+
+{% block main %}
+{% load martortags %}
+
+<section id="backlog">
+	<header>
+		<div class="flex-row">
+			<h2 class="flex-extend">Les Sprints</h2>
+		</div>
+	</header>
+	
+	<canvas id="myChart" width="400" height="150"></canvas>
+	
+	<ul class="sprints-list">
+	{% for sprint in sprints %}
+		<li class="sprint-li">
+			<div class="flex-col">
+			
+				<div class="flex-row">
+					<h4>Sprint #{{ sprint.id }} : {{ sprint.date_start|date:"d M. Y" }} au {{ sprint.date_end|date:"d M. Y" }}</h4>
+					{% if sprint.running %}<span class="running" style="margin-left: 14px;">En cours</span>{% endif %}
+				</div>
+				
+				<div class="flex-row flex-space-around" style="margin-bottom: 20px;">
+					<b>Stories programmées: <a href="{% url 'story_index' %}?sprint={{ sprint.id }}">{{ sprint.nb_stories }}</a> </b>
+					<b>Vélocité prévue: {{ sprint.planned_velocity }} </b>
+					<b>Vélocité réelle: {{ sprint.real_velocity }} </b>
+				</div>
+				
+				{% if sprint.retro %}
+				<div style="padding: 0 20px;">
+					{{ sprint.retro|safe_markdown }}
+				</div>
+				{% endif %}
+			</div>
+		</li>
+	{% endfor %}
+	</ul>
+	
+</section>
+
+<script>
+var ctx = document.getElementById("myChart").getContext('2d');
+var myChart = new Chart(ctx, {
+	type: 'line',
+    data: {
+        labels: [{% for sprint in sprints|dictsort:"id" %}{% if not forloop.last %}"Sprint #{{ sprint.id }}",{% endif %}{% endfor %}],
+        datasets: [{
+            label: 'Vélocité réelle',
+            data: [{% for sprint in sprints|dictsort:"id" %}{% if not forloop.last %}{{ sprint.real_velocity }},{% endif %}{% endfor %}],
+            backgroundColor: [
+            	'rgba(255, 255, 255, 0.2)'
+            ],
+            borderColor: [
+                'rgba(0,150,0,1)',
+            ],
+            borderWidth: 1
+        },
+        {
+            label: 'Vélocité prévue',
+            data: [{% for sprint in sprints|dictsort:"id" %}{% if not forloop.last %}{{ sprint.planned_velocity }},{% endif %}{% endfor %}],
+            backgroundColor: [
+                'rgba(255, 255, 255, 0.2)'
+            ],
+            borderColor: [
+            	'rgba(0,0,150,1)',
+            ],
+            borderWidth: 1
+        }]
+    },
+    options: {
+        scales: {
+            yAxes: [{
+                ticks: {
+                    beginAtZero:true
+                }
+            }]
+        }
+    }
+});
+</script>
+
 {% endblock %}