466 lines
18 KiB
Twig
466 lines
18 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block localstyle %}
|
|
<style>
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block title %}
|
|
= Liste des Issues
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<h1>
|
|
Liste des Issues
|
|
</h1>
|
|
|
|
<div class="d-flex">
|
|
<div style="width:320px; padding: 0px 10px 0px 0px">
|
|
<div style="margin-bottom: 1em;">
|
|
<button id="toggleView" class="btn btn-primary w-100"> Afficher Vue Graphique</button>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="projectFilter"><strong>Filtrer par projet :</strong></label><br>
|
|
<select id="projectFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options ajoutées dynamiquement #}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="statusFilter"><strong>Filtrer par statut :</strong></label><br>
|
|
<select id="statusFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options JS dynamiques #}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="sprintFilter"><strong>Filtrer par sprint :</strong></label><br>
|
|
<select id="sprintFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options JS dynamiques #}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="versionFilter"><strong>Filtrer par version :</strong></label><br>
|
|
<select id="versionFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options JS dynamiques #}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="trackerFilter"><strong>Filtrer par tracker :</strong></label><br>
|
|
<select id="trackerFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options JS dynamiques #}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="categoryFilter"><strong>Filtrer par catégorie :</strong></label><br>
|
|
<select id="categoryFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options JS dynamiques #}
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1em;">
|
|
<label for="assignedFilter"><strong>Filtrer par intervenant :</strong></label><br>
|
|
<select id="assignedFilter" multiple style="width: 100%; height: 150px;" class="select2">
|
|
{# Options JS dynamiques #}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="flex-grow:1">
|
|
<div class="dataTable_wrapper">
|
|
<table class="table table-striped table-bordered table-hover" id="dataTables" style="width:100%; zoom:80%;">
|
|
<thead>
|
|
<tr>
|
|
<th width="70px">Id</th>
|
|
<th width="130px">Projet</th>
|
|
<th>Nom</th>
|
|
<th>Statut</th>
|
|
<th>Sprint</th>
|
|
<th>Version</th>
|
|
<th>Tracker</th>
|
|
<th>Catégorie</th>
|
|
<th>Affecté à</th>
|
|
<th>Point</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for issue in issues %}
|
|
<tr>
|
|
<td>#{{issue.id}}</td>
|
|
<td>{{issue.project.title}}</td>
|
|
<td>{{issue.redmine.subject}}</td>
|
|
<td>{{'%02d'|format(issue.rowStatus)}}-{{issue.redmine.status.name}}</td>
|
|
<td>{{issue.sprintName}}</td>
|
|
<td>{{issue.versionName}}</td>
|
|
<td>{{issue.redmine.tracker.name}}</td>
|
|
<td>{{issue.categoryName}}</td>
|
|
<td>{{issue.assignedName}}</td>
|
|
<td>{{issue.redmine.sprint.story_points}}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="chartContainer" style="display:none; margin-top:2em;">
|
|
<canvas id="statusChart" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block localscript %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
function restoreSelectValue(selectId) {
|
|
const stored = localStorage.getItem(selectId);
|
|
if (stored) {
|
|
try {
|
|
const values = JSON.parse(stored);
|
|
$(`#${selectId}`).val(values).trigger('change');
|
|
} catch (e) {
|
|
console.error(`Erreur en restaurant le ${selectId}`, e);
|
|
}
|
|
}
|
|
}
|
|
|
|
const idProject=1;
|
|
const idStatus=3;
|
|
const idSprint=4;
|
|
const idVersion=5;
|
|
const idTracker=6;
|
|
const idCategory=7;
|
|
const idAssigned=8;
|
|
|
|
const table = $('#dataTables').DataTable({
|
|
columnDefs: [
|
|
{ "targets": "no-sort", "orderable": false },
|
|
{ "targets": "no-string", "type" : "num" }
|
|
],
|
|
responsive: true,
|
|
iDisplayLength: 100,
|
|
order: [[ 0, "desc" ]]
|
|
});
|
|
|
|
// Étape 1 : Récupérer les filtres possible
|
|
const projectSet = new Set();
|
|
table.column(idProject).data().each(function(value) {
|
|
projectSet.add(value);
|
|
});
|
|
const statusSet = new Set();
|
|
table.column(idStatus).data().each(function(value) {
|
|
statusSet.add(value);
|
|
});
|
|
const sprintSet = new Set();
|
|
table.column(idSprint).data().each(function(value) {
|
|
sprintSet.add(value);
|
|
});
|
|
const versionSet = new Set();
|
|
table.column(idVersion).data().each(function(value) {
|
|
versionSet.add(value);
|
|
});
|
|
const trackerSet = new Set();
|
|
table.column(idTracker).data().each(function(value) {
|
|
trackerSet.add(value);
|
|
});
|
|
const categorySet = new Set();
|
|
table.column(idCategory).data().each(function(value) {
|
|
categorySet.add(value);
|
|
});
|
|
const assignedSet = new Set();
|
|
table.column(idAssigned).data().each(function(value) {
|
|
assignedSet.add(value);
|
|
});
|
|
|
|
// Étape 2 : Remplir dynamiquement les filtres
|
|
const $selectProject = $('#projectFilter');
|
|
Array.from(projectSet).sort().forEach(function(project) {
|
|
const option = $('<option>', {
|
|
value: project,
|
|
text: project,
|
|
selected: false
|
|
});
|
|
$selectProject.append(option);
|
|
});
|
|
const $statusSelect = $('#statusFilter');
|
|
Array.from(statusSet).sort().forEach(function(status) {
|
|
const option = $('<option>', {
|
|
value: status,
|
|
text: status,
|
|
selected: false
|
|
});
|
|
$statusSelect.append(option);
|
|
});
|
|
const $sprintSelect = $('#sprintFilter');
|
|
Array.from(sprintSet).sort().forEach(function(sprint) {
|
|
const option = $('<option>', {
|
|
value: sprint,
|
|
text: (sprint?sprint:"Aucun"),
|
|
selected: false
|
|
});
|
|
$sprintSelect.append(option);
|
|
});
|
|
const $versionSelect = $('#versionFilter');
|
|
Array.from(versionSet).sort().forEach(function(version) {
|
|
const option = $('<option>', {
|
|
value: version,
|
|
text: (version?version:"Aucune"),
|
|
selected: false
|
|
});
|
|
$versionSelect.append(option);
|
|
});
|
|
const $trackerSelect = $('#trackerFilter');
|
|
Array.from(trackerSet).sort().forEach(function(tracker) {
|
|
const option = $('<option>', {
|
|
value: tracker,
|
|
text: tracker,
|
|
selected: false
|
|
});
|
|
$trackerSelect.append(option);
|
|
});
|
|
const $categorySelect = $('#categoryFilter');
|
|
Array.from(categorySet).sort().forEach(function(category) {
|
|
const option = $('<option>', {
|
|
value: category,
|
|
text: (category?category:"Aucune"),
|
|
selected: false
|
|
});
|
|
$categorySelect.append(option);
|
|
});
|
|
const $assignedSelect = $('#assignedFilter');
|
|
Array.from(assignedSet).sort().forEach(function(assigned) {
|
|
const option = $('<option>', {
|
|
value: assigned,
|
|
text: (assigned?assigned:"Aucun"),
|
|
selected: false
|
|
});
|
|
$assignedSelect.append(option);
|
|
});
|
|
|
|
// Etape 3 : restaurer les valeurs filtrés stocké en localstorage
|
|
restoreSelectValue('projectFilter');
|
|
restoreSelectValue('statusFilter');
|
|
restoreSelectValue('sprintFilter');
|
|
restoreSelectValue('versionFilter');
|
|
restoreSelectValue('trackerFilter');
|
|
restoreSelectValue('categoryFilter');
|
|
restoreSelectValue('assignedFilter');
|
|
|
|
// Étape 4 : Ajouter le filtre personnalisé à DataTables
|
|
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
|
|
const selectedProjects = $('#projectFilter').val();
|
|
const selectedStatuses = $('#statusFilter').val();
|
|
const selectedSprints = $('#sprintFilter').val();
|
|
const selectedVersions = $('#versionFilter').val();
|
|
const selectedTrackers = $('#trackerFilter').val();
|
|
const selectedCategories = $('#categoryFilter').val();
|
|
const selectedAssigneds = $('#assignedFilter').val();
|
|
|
|
const project = data[idProject];
|
|
const status = data[idStatus];
|
|
const sprint = data[idSprint];
|
|
const version = data[idVersion];
|
|
const tracker = data[idTracker];
|
|
const category = data[idCategory];
|
|
const assigned = data[idAssigned];
|
|
|
|
const projectMatch = !selectedProjects || selectedProjects.length === 0 || selectedProjects.includes(project);
|
|
const statusMatch = !selectedStatuses || selectedStatuses.length === 0 || selectedStatuses.includes(status);
|
|
const sprintMatch = !selectedSprints || selectedSprints.length === 0 || selectedSprints.includes(sprint);
|
|
const versionMatch = !selectedVersions || selectedVersions.length === 0 || selectedVersions.includes(version);
|
|
const trackerMatch = !selectedTrackers || selectedTrackers.length === 0 || selectedTrackers.includes(tracker);
|
|
const categoryMatch = !selectedCategories || selectedCategories.length === 0 || selectedCategories.includes(category);
|
|
const assignedMatch = !selectedAssigneds || selectedAssigneds.length === 0 || selectedAssigneds.includes(assigned);
|
|
|
|
return projectMatch && statusMatch && sprintMatch && versionMatch && trackerMatch && categoryMatch && assignedMatch;
|
|
});
|
|
|
|
|
|
// Étape 5 : Rafraîchir le tableau quand le select change
|
|
const filterIds = ['projectFilter', 'statusFilter', 'sprintFilter','versionFilter', 'trackerFilter', 'categoryFilter', 'assignedFilter'];
|
|
filterIds.forEach(function(filterId) {
|
|
$(`#${filterId}`).on('change', function() {
|
|
const val = $(this).val();
|
|
localStorage.setItem(filterId, JSON.stringify(val || []));
|
|
table.draw();
|
|
|
|
// Si on est en vue graphique, mettre à jour le graphique
|
|
if ($('#chartContainer').is(':visible')) {
|
|
updateChart();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Etape 6 = chart
|
|
let chartInstance = null;
|
|
|
|
function generateGradientColors(startColor, endColor, steps) {
|
|
function hexToRgb(hex) {
|
|
hex = hex.replace(/^#/, '');
|
|
return {
|
|
r: parseInt(hex.substring(0, 2), 16),
|
|
g: parseInt(hex.substring(2, 4), 16),
|
|
b: parseInt(hex.substring(4, 6), 16)
|
|
};
|
|
}
|
|
|
|
function rgbToHex(r, g, b) {
|
|
return '#' + [r, g, b].map(x => {
|
|
const hex = x.toString(16);
|
|
return hex.length === 1 ? '0' + hex : hex;
|
|
}).join('');
|
|
}
|
|
|
|
const start = hexToRgb(startColor);
|
|
const end = hexToRgb(endColor);
|
|
const gradient = [];
|
|
|
|
for (let i = 0; i < steps; i++) {
|
|
const r = Math.round(start.r + ((end.r - start.r) * i) / (steps - 1));
|
|
const g = Math.round(start.g + ((end.g - start.g) * i) / (steps - 1));
|
|
const b = Math.round(start.b + ((end.b - start.b) * i) / (steps - 1));
|
|
gradient.push(rgbToHex(r, g, b));
|
|
}
|
|
|
|
return gradient;
|
|
}
|
|
|
|
$('#toggleView').on('click', function () {
|
|
const isTableVisible = $('#dataTables').is(':visible');
|
|
|
|
if (isTableVisible) {
|
|
// Passer en vue graphique
|
|
$('#dataTables_wrapper').hide();
|
|
$('#chartContainer').show();
|
|
$(this).text('Afficher Vue Tableau');
|
|
localStorage.setItem('currentView', 'chart');
|
|
|
|
if (!chartInstance) {
|
|
drawChart();
|
|
} else {
|
|
updateChart();
|
|
}
|
|
} else {
|
|
// Passer en vue tableau
|
|
$('#chartContainer').hide();
|
|
$('#dataTables_wrapper').show();
|
|
$(this).text('Afficher Vue Graphique');
|
|
localStorage.setItem('currentView', 'table');
|
|
}
|
|
});
|
|
|
|
function drawChart() {
|
|
const dataByStatus = {};
|
|
|
|
// Parcours des lignes filtrées de DataTables
|
|
table.rows({ filter: 'applied' }).every(function () {
|
|
const data = this.data();
|
|
const status = data[idStatus];
|
|
const points = parseFloat(data[9]) || 0;
|
|
|
|
if (!dataByStatus[status]) {
|
|
dataByStatus[status] = 0;
|
|
}
|
|
dataByStatus[status] += points;
|
|
});
|
|
|
|
// Tri alphabétique des statuts
|
|
const sortedLabels = Object.keys(dataByStatus).sort((a, b) =>
|
|
a.localeCompare(b, 'fr', { sensitivity: 'base' })
|
|
);
|
|
|
|
// Données triées
|
|
const sortedDataPoints = sortedLabels.map(label => dataByStatus[label]);
|
|
|
|
// Dégradé du bleu vers le vert
|
|
const gradientColors = generateGradientColors('#007bff', '#28a745', sortedLabels.length);
|
|
|
|
// Couleurs finales : rouge si "échec", sinon couleur du dégradé
|
|
const colors = sortedLabels.map((label, index) => {
|
|
const lowerLabel = label.toLowerCase();
|
|
if (lowerLabel.includes('échec') || lowerLabel.includes('echec')) {
|
|
return '#dc3545'; // rouge Bootstrap
|
|
} else {
|
|
return gradientColors[index];
|
|
}
|
|
});
|
|
|
|
// Création du graphique Chart.js
|
|
const ctx = document.getElementById('statusChart').getContext('2d');
|
|
chartInstance = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: sortedLabels,
|
|
datasets: [{
|
|
label: 'Points par Statut',
|
|
data: sortedDataPoints,
|
|
backgroundColor: colors,
|
|
borderColor: colors,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function (context) {
|
|
return `${context.dataset.label}: ${context.parsed.y} points`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Total des Points'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Statuts'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateChart() {
|
|
if (chartInstance) {
|
|
chartInstance.destroy();
|
|
chartInstance = null;
|
|
}
|
|
drawChart();
|
|
}
|
|
|
|
const storedView = localStorage.getItem('currentView');
|
|
if (storedView === 'chart') {
|
|
$('#dataTables_wrapper').hide();
|
|
$('#chartContainer').show();
|
|
$('#toggleView').text('Afficher Vue Tableau');
|
|
drawChart();
|
|
} else {
|
|
$('#chartContainer').hide();
|
|
$('#dataTables_wrapper').show();
|
|
$('#toggleView').text('Afficher Vue Graphique');
|
|
}
|
|
|
|
|
|
table.draw();
|
|
updateChart();
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|