ebene/radiantrh
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modif

Browse Source
This commit is contained in:
KONE SOREL
2025-12-31 08:06:35 +00:00
parent 58a2f533cb
commit fb12a515ac
4 changed files with 83 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
Js/fonctions.js
View File

@@ -810,6 +810,7 @@ function afficher_adherents_police()
function graphique_sinistre() {
// Spinner pendant le chargement
$("#div_graphique").html(`
<div class="text-center my-5 py-5">
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
@@ -824,20 +825,46 @@ function graphique_sinistre() {
type: 'get',
dataType: 'json',
success: function(data) {
$("#div_graphique").empty();
console.log("Réponse JSON reçue:", data);
// Construis ton layout HTML ici
$("#div_graphique").append(`
// Layout HTML
$("#div_graphique").html(`
<div class="text-end my-3">
<button id="exportPdfBtn" class="btn btn-danger">
<i class="fas fa-file-pdf"></i> Exporter le tableau de bord en PDF
</button>
</div>
<div class="row">
<div class="col-md-6 mb-4"><canvas id="claimsChart"></canvas></div>
<div class="col-md-6 mb-4"><canvas id="claimsMonthChart"></canvas></div>
<div class="col-md-12 mb-4"><canvas id="lossRatioChart"></canvas></div>
<div class="col-md-6 mb-4">
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title text-primary">Répartition des sinistres</h5>
<canvas id="claimsChart"></canvas>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title text-success">Évolution mensuelle</h5>
<canvas id="claimsMonthChart"></canvas>
</div>
</div>
</div>
<div class="col-md-12 mb-4">
<div class="card shadow-sm">
<div class="card-body">
<h5 class="card-title text-danger">Ratio de sinistralité</h5>
<canvas id="lossRatioChart"></canvas>
</div>
</div>
</div>
</div>
`);
// --- Graphiques Chart.js ---
// Initialise les graphiques avec Chart.js
// Graphique 1 : répartition des sinistres
// 1. Répartition
new Chart(document.getElementById('claimsChart'), {
type: 'bar',
data: {
@@ -850,7 +877,7 @@ function graphique_sinistre() {
}
});
// Graphique 2 : évolution mensuelle
// 2. Évolution mensuelle
new Chart(document.getElementById('claimsMonthChart'), {
type: 'line',
data: {
@@ -872,7 +899,7 @@ function graphique_sinistre() {
}
});
// Graphique 3 : ratio de sinistralité
// 3. Ratio de sinistralité
new Chart(document.getElementById('lossRatioChart'), {
type: 'line',
data: {
@@ -886,9 +913,46 @@ function graphique_sinistre() {
}
});
// --- Export PDF ---
$("#exportPdfBtn").on("click", function() {
if (!window.jspdf) {
alert("Erreur : jsPDF n'est pas chargé.");
return;
}
const { jsPDF } = window.jspdf;
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.setFontSize(18);
pdf.text("Tableau de bord - Synthèse", 10, 20);
// Ajout des graphiques
addChartToPdf(pdf, 'claimsChart', 'Répartition des sinistres', 40);
addChartToPdf(pdf, 'claimsMonthChart', 'Évolution mensuelle', 120);
pdf.addPage();
addChartToPdf(pdf, 'lossRatioChart', 'Ratio de sinistralité', 40);
pdf.save('Tableau_de_bord.pdf');
});
function addChartToPdf(pdf, canvasId, title, startY) {
const canvas = document.getElementById(canvasId);
if (canvas) {
const imgData = canvas.toDataURL('image/png', 1.0);
pdf.setFontSize(14);
pdf.text(title, 10, startY);
pdf.addImage(imgData, 'PNG', 10, startY + 5, 180, 60);
}
}
},
error: function(err) {
$("#div_graphique").html(`<div class="alert alert-danger">Impossible de charger les graphiques.</div>`);
console.error("Erreur AJAX:", err);
$("#div_graphique").html(`
<div class="alert alert-danger">
Impossible de charger les graphiques.
</div>
`);
}
});
}