{% extends '_layout.html' %}

{% block title %}
	Rapport: Activité
{% endblock %}

{% block breadcrumb %}
	<li><a href="{% url 'index' %}">Accueil</a></li>
	<li><a href="{% url 'reports' %}">Rapports</a></li>
	<li><a>Activité</a></li>
{% endblock %}

{% block main %}

<section id="backlog">
	<header>
		<div class="flex-row">
			<h2 class="flex-extend">Rapport d'activité</h2>
		</div>
	</header>
	
	<h2>Activité par projets</h2>
	<h4>Sprint courant</h4>
	<canvas id="chart-activity-current" width="600" height="300"></canvas>

	<h4>Sur les 6 derniers mois</h4>
	<canvas id="chart-activity-sixmonths" width="600" height="300"></canvas>
	
	<h2>Activité par epic</h2>
	<h4>Sprint courant</h4>
	<canvas id="chart-epics-activity-current" width="600" height="300"></canvas>

	<h4>Sur les 6 derniers mois</h4>
	<canvas id="chart-epics-activity-sixmonths" width="600" height="300"></canvas>
	
</section>

<script>
var ctx = document.getElementById("chart-activity-current").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'polarArea',
    
    data: {
        labels: [{% for project in projects_activity %}"{{ project.name }}",{% endfor %}],
        datasets: [{
	            label: 'Activité',
	            data: [{% for project, act in projects_activity.items %}"{{ act.current }}",{% endfor %}],
	            backgroundColor: [{% for project in projects_activity %}'{{ project.color }}',{% endfor %}]
            }]
    }
});
var ctx = document.getElementById("chart-activity-sixmonths").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'polarArea',
    
    data: {
        labels: [{% for project in projects_activity %}"{{ project.name }}",{% endfor %}],
        datasets: [{
	            label: 'Activité',
	            data: [{% for project, act in projects_activity.items %}"{{ act.sixmonths }}",{% endfor %}],
	            backgroundColor: [{% for project in projects_activity %}'{{ project.color }}',{% endfor %}]
            }]
    }
});
var ctx = document.getElementById("chart-epics-activity-current").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'polarArea',
    
    data: {
        labels: [{% for epic in epics_activity %}"{{ epic.name }}",{% endfor %}],
        datasets: [{
	            label: 'Activité',
	            data: [{% for epic, act in epics_activity.items %}"{{ act.current }}",{% endfor %}],
	            backgroundColor: [{% for epic in epics_activity %}'{{ epic.project.color }}',{% endfor %}]
            }]
    }
});
var ctx = document.getElementById("chart-epics-activity-sixmonths").getContext('2d');
var myChart = new Chart(ctx, {
	type: 'polarArea',
    
    data: {
        labels: [{% for epic in epics_activity %}"{{ epic.name }}",{% endfor %}],
        datasets: [{
	            label: 'Activité',
	            data: [{% for epic, act in epics_activity.items %}"{{ act.sixmonths }}",{% endfor %}],
	            backgroundColor: [{% for epic in epics_activity %}'{{ epic.project.color }}',{% endfor %}]
            }]
    }
});
</script>

{% endblock %}