This commit is contained in:
KONE SOREL 2025-12-30 18:53:44 +00:00
parent 03cdecddea
commit 79d51ebbc9
3 changed files with 191 additions and 173 deletions

View File

@ -45,10 +45,14 @@ class ControleurAjaxgraphiquesinistres extends Controleur {
} }
// --- Mode Vue Ajax HTML --- // --- Mode Vue Ajax HTML ---
// Utilisation de constantes JSON pour sécuriser l'insertion dans le JavaScript
// JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP empêchent le bris du HTML/JS
$optionsJson = JSON_NUMERIC_CHECK | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP;
$this->genererVueAjax([ $this->genererVueAjax([
'dataTabClaims' => json_encode($tabclaims, JSON_NUMERIC_CHECK), 'dataTabClaims' => json_encode($tabclaims, $optionsJson),
'dataTabClaimsMonth' => json_encode($tabclaimsMonth, JSON_NUMERIC_CHECK), 'dataTabClaimsMonth' => json_encode($tabclaimsMonth, $optionsJson),
'dataLossRatio' => json_encode($tabLossRatio, JSON_NUMERIC_CHECK) 'dataLossRatio' => json_encode($tabLossRatio, $optionsJson)
]); ]);
} }
} }

View File

@ -1,3 +1,5 @@
//1- Page HTML / PHP:Accueil.php
<div class="container text-primary"> <div class="container text-primary">
<h1><i class="fas fa-tachometer-alt"></i> <?= _('Tableau de bord') ?></h1> <h1><i class="fas fa-tachometer-alt"></i> <?= _('Tableau de bord') ?></h1>
@ -138,7 +140,7 @@
<i class="accordion-icon bi bi-chevron-down"></i> <i class="accordion-icon bi bi-chevron-down"></i>
</h2> </h2>
<div class="accordion-content"> <div class="accordion-content">
<button id="exportPdfBtn" class="btn btn-primary" onclick="graphique_sinistre();"> <button id="graphiqueBtn" class="btn btn-primary" onclick="graphique_sinistre();">
<i class="fas fa-sync-alt me-2"></i> <?= _('Actualiser') ?> <i class="fas fa-sync-alt me-2"></i> <?= _('Actualiser') ?>
</button> </button>
<div id="div_graphique"> <div id="div_graphique">
@ -147,37 +149,14 @@
</section> </section>
</div> </div>
</div> </div>
<!-- Activité & Alertes -->
<!--
<div class="grid-2">
<div class="card">
<h3><?= _('Activité récente')?></h3>
<ul>
<?php foreach ($activities as $activity): ?>
<li>
<i class="<?= $activity["icon"] ?>"></i>
<?= $activity["label"] ?>
<small style="float:right;color:#999"><?= $activity["time"] ?></small>
</li>
<?php endforeach; ?>
</ul>
</div> </div>
<div class="card"> <!-- ======================================================= -->
<h3><?= _('Alertes')?></h3> <!-- CHARGEMENT DES LIBRAIRIES GRAPHIQUES ET PDF ICI -->
<ul> <!-- Pour éviter de les recharger à chaque appel Ajax -->
<?php foreach ($alerts as $alert): ?> <!-- ======================================================= -->
<li class="alert"> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<i class="fas fa-exclamation-triangle"></i> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<?= $alert ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
-->
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
@ -214,4 +193,3 @@
}); });
}); });
</script> </script>

View File

@ -31,23 +31,54 @@
</div> </div>
</div> </div>
<!--
NOTE: Les librairies Chart.js et jsPDF doivent être chargées
dans la page parente (Accueil.php) et non ici pour éviter les erreurs.
-->
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<!-- librairie jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script> <script>
document.getElementById('exportPdfBtn').addEventListener('click', function () { // On encapsule tout dans une fonction auto-exécutée (IIFE)
// Cela empêche les variables 'const' de polluer le scope global et de planter au 2ème clic.
(function() {
// Récupération des données injectées par PHP
// Grâce aux flags JSON_HEX dans le contrôleur, cette injection est sûre.
const dataClaims = <?= $dataTabClaims ?>;
const dataClaimsMonth = <?= $dataTabClaimsMonth ?>;
const dataLossRatio = <?= $dataLossRatio ?>;
// --- Gestion du bouton Export PDF ---
const btnExport = document.getElementById('exportPdfBtn');
if (btnExport) {
btnExport.addEventListener('click', function () {
// Vérification que la librairie est chargée
if (!window.jspdf) {
alert("Erreur : La librairie jsPDF n'est pas chargée.");
return;
}
const { jsPDF } = window.jspdf; const { jsPDF } = window.jspdf;
const pdf = new jsPDF('p', 'mm', 'a4'); const pdf = new jsPDF('p', 'mm', 'a4');
// --- Logo --- // --- Logo ---
const logo = new Image(); const logo = new Image();
logo.src = "<?= $_SESSION['lienLogo'] ?>"; // chemin vers ton logo logo.src = "<?= $_SESSION['lienLogo'] ?>";
logo.onload = function() { logo.onload = function() {
try {
pdf.addImage(logo, 'PNG', 150, 5, 40, 20); pdf.addImage(logo, 'PNG', 150, 5, 40, 20);
} catch(e) {
console.warn("Impossible de charger le logo dans le PDF");
}
generatePdfContent(pdf);
};
logo.onerror = function() {
// Si le logo échoue, on génère quand même le PDF
generatePdfContent(pdf);
};
});
}
function generatePdfContent(pdf) {
// --- Titre principal --- // --- Titre principal ---
pdf.setFontSize(18); pdf.setFontSize(18);
pdf.text("<?= _("Tableau de bord - Synthèse") ?>", 10, 20); pdf.text("<?= _("Tableau de bord - Synthèse") ?>", 10, 20);
@ -76,20 +107,28 @@
// --- Sauvegarde --- // --- Sauvegarde ---
pdf.save('Tableau_de_bord.pdf'); pdf.save('Tableau_de_bord.pdf');
}; }
function addChartToPdf(pdf, canvasId, title, startY) { function addChartToPdf(pdf, canvasId, title, startY) {
const canvas = document.getElementById(canvasId); const canvas = document.getElementById(canvasId);
if (canvas) {
try {
const imgData = canvas.toDataURL('image/png', 1.0); const imgData = canvas.toDataURL('image/png', 1.0);
pdf.setFontSize(14); pdf.setFontSize(14);
pdf.text(title, 10, startY); pdf.text(title, 10, startY);
pdf.addImage(imgData, 'PNG', 10, startY + 5, 180, 60); pdf.addImage(imgData, 'PNG', 10, startY + 5, 180, 60);
} catch (e) {
console.warn("Erreur export graphique " + canvasId, e);
}
}
} }
});
// Sinistres par garantie // --- Initialisation des graphiques ---
const dataClaims = <?= $dataTabClaims ?>;
new Chart(document.getElementById('claimsPie'), { // 1. Sinistres par garantie
const ctxPie = document.getElementById('claimsPie');
if (ctxPie) {
new Chart(ctxPie, {
type: 'doughnut', type: 'doughnut',
data: { data: {
labels: dataClaims.claimsLabels, labels: dataClaims.claimsLabels,
@ -103,18 +142,19 @@
} }
} }
}); });
}
// Evolution des sinistres par mois // 2. Evolution des sinistres par mois
const dataClaimsMonth = <?= $dataTabClaimsMonth ?>; const ctxLine = document.getElementById('claimsLine');
if (ctxLine) {
new Chart(document.getElementById('claimsLine'), { new Chart(ctxLine, {
data: { data: {
labels: dataClaimsMonth.months, labels: dataClaimsMonth.months,
datasets: [ datasets: [
{ {
type: 'line', type: 'line',
label: "Cumulés", label: "Cumulés",
data: dataClaimsMonth.monthlyClaims, // cumulés data: dataClaimsMonth.monthlyClaims,
borderColor: "blue", borderColor: "blue",
backgroundColor: "rgba(0,0,255,0.2)", backgroundColor: "rgba(0,0,255,0.2)",
tension: 0.4, tension: 0.4,
@ -123,7 +163,7 @@
{ {
type: 'bar', type: 'bar',
label: "Mensuels", label: "Mensuels",
data: dataClaimsMonth.singleClaims, // valeurs brutes data: dataClaimsMonth.singleClaims,
backgroundColor: "rgba(255,0,0,0.5)", backgroundColor: "rgba(255,0,0,0.5)",
borderColor: "red", borderColor: "red",
borderWidth: 1, borderWidth: 1,
@ -141,25 +181,20 @@
scales: { scales: {
y: { y: {
beginAtZero: true, beginAtZero: true,
title: { title: { display: true, text: "Montant des sinistres" }
display: true,
text: "Montant des sinistres"
}
}, },
x: { x: {
title: { title: { display: true, text: "Mois" }
display: true,
text: "Mois"
}
} }
} }
} }
}); });
}
// Sinistralité // 3. Sinistralité
const dataLossRatio = <?= $dataLossRatio ?>; const ctxBar = document.getElementById('lossRatioBar');
if (ctxBar) {
new Chart(document.getElementById('lossRatioBar'), { new Chart(ctxBar, {
type: 'bar', type: 'bar',
data: { data: {
labels: dataLossRatio.lossRatioLabels, labels: dataLossRatio.lossRatioLabels,
@ -177,6 +212,7 @@
} }
} }
}); });
}
})(); // Fin de l'IIFE
</script> </script>