Var
This commit is contained in:
parent
03cdecddea
commit
79d51ebbc9
|
|
@ -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)
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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,38 +149,15 @@
|
||||||
</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 class="card">
|
|
||||||
<h3><?= _('Alertes')?></h3>
|
|
||||||
<ul>
|
|
||||||
<?php foreach ($alerts as $alert): ?>
|
|
||||||
<li class="alert">
|
|
||||||
<i class="fas fa-exclamation-triangle"></i>
|
|
||||||
<?= $alert ?>
|
|
||||||
</li>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ======================================================= -->
|
||||||
|
<!-- CHARGEMENT DES LIBRAIRIES GRAPHIQUES ET PDF ICI -->
|
||||||
|
<!-- Pour éviter de les recharger à chaque appel Ajax -->
|
||||||
|
<!-- ======================================================= -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Laisser Bootstrap gérer les accordéons - suppression du script conflictuel
|
// Laisser Bootstrap gérer les accordéons - suppression du script conflictuel
|
||||||
|
|
@ -213,5 +192,4 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -31,152 +31,188 @@
|
||||||
</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)
|
||||||
const { jsPDF } = window.jspdf;
|
// Cela empêche les variables 'const' de polluer le scope global et de planter au 2ème clic.
|
||||||
const pdf = new jsPDF('p', 'mm', 'a4');
|
(function() {
|
||||||
|
|
||||||
// --- Logo ---
|
// Récupération des données injectées par PHP
|
||||||
const logo = new Image();
|
// Grâce aux flags JSON_HEX dans le contrôleur, cette injection est sûre.
|
||||||
logo.src = "<?= $_SESSION['lienLogo'] ?>"; // chemin vers ton logo
|
|
||||||
logo.onload = function() {
|
|
||||||
pdf.addImage(logo, 'PNG', 150, 5, 40, 20);
|
|
||||||
|
|
||||||
// --- Titre principal ---
|
|
||||||
pdf.setFontSize(18);
|
|
||||||
pdf.text("<?= _("Tableau de bord - Synthèse") ?>", 10, 20);
|
|
||||||
|
|
||||||
// --- KPIs ---
|
|
||||||
pdf.setFontSize(12);
|
|
||||||
pdf.text("Total Contrats : <?= format_N($kpis['nbPolice']) ?>", 10, 35);
|
|
||||||
pdf.text("Total Assurés :", 10, 42);
|
|
||||||
pdf.text(" Salariés : <?= format_N($kpis['nbAdherent']) ?>", 10, 49);
|
|
||||||
pdf.text(" Ayants droits : <?= format_N($kpis['nbDependant']) ?>", 10, 56);
|
|
||||||
pdf.text("Primes :", 10, 66);
|
|
||||||
pdf.text(" TTC : <?= format_N($kpis['primeTtc']).' '.$_SESSION['devise_C'] ?>", 10, 73);
|
|
||||||
pdf.text(" Nette Stat : <?= format_N($kpis['primeNetteStat']).' '.$_SESSION['devise_C'] ?>", 10, 80);
|
|
||||||
pdf.text("Sinistres :", 10, 90);
|
|
||||||
pdf.text(" Nombre : <?= format_N($kpis['nbSinistres']) ?>", 10, 97);
|
|
||||||
pdf.text(" Montant : <?= format_N($kpis['montantApayer']).' '.$_SESSION['devise_C'] ?>", 10, 104);
|
|
||||||
pdf.text(" Rapport S/P : <?= $kpis['rapportSp'].'%' ?>", 10, 111);
|
|
||||||
|
|
||||||
// --- Graphiques ---
|
|
||||||
addChartToPdf(pdf, 'claimsPie', 'Sinistres par garantie', 125);
|
|
||||||
addChartToPdf(pdf, 'claimsLine', 'Évolution des sinistres mensuels', 200);
|
|
||||||
|
|
||||||
// Nouvelle page pour le dernier graphique
|
|
||||||
pdf.addPage();
|
|
||||||
addChartToPdf(pdf, 'lossRatioBar', 'Sinistralité (%)', 20);
|
|
||||||
|
|
||||||
// --- Sauvegarde ---
|
|
||||||
pdf.save('Tableau_de_bord.pdf');
|
|
||||||
};
|
|
||||||
|
|
||||||
function addChartToPdf(pdf, canvasId, title, startY) {
|
|
||||||
const canvas = document.getElementById(canvasId);
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sinistres par garantie
|
|
||||||
const dataClaims = <?= $dataTabClaims ?>;
|
const dataClaims = <?= $dataTabClaims ?>;
|
||||||
new Chart(document.getElementById('claimsPie'), {
|
|
||||||
type: 'doughnut',
|
|
||||||
data: {
|
|
||||||
labels: dataClaims.claimsLabels,
|
|
||||||
datasets: [{
|
|
||||||
data: dataClaims.claimsValues
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
plugins: {
|
|
||||||
legend: { position: 'right' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Evolution des sinistres par mois
|
|
||||||
const dataClaimsMonth = <?= $dataTabClaimsMonth ?>;
|
const dataClaimsMonth = <?= $dataTabClaimsMonth ?>;
|
||||||
|
|
||||||
new Chart(document.getElementById('claimsLine'), {
|
|
||||||
data: {
|
|
||||||
labels: dataClaimsMonth.months,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
type: 'line',
|
|
||||||
label: "Cumulés",
|
|
||||||
data: dataClaimsMonth.monthlyClaims, // cumulés
|
|
||||||
borderColor: "blue",
|
|
||||||
backgroundColor: "rgba(0,0,255,0.2)",
|
|
||||||
tension: 0.4,
|
|
||||||
yAxisID: 'y'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'bar',
|
|
||||||
label: "Mensuels",
|
|
||||||
data: dataClaimsMonth.singleClaims, // valeurs brutes
|
|
||||||
backgroundColor: "rgba(255,0,0,0.5)",
|
|
||||||
borderColor: "red",
|
|
||||||
borderWidth: 1,
|
|
||||||
yAxisID: 'y'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
responsive: true,
|
|
||||||
interaction: {
|
|
||||||
mode: 'index',
|
|
||||||
intersect: false
|
|
||||||
},
|
|
||||||
stacked: false,
|
|
||||||
scales: {
|
|
||||||
y: {
|
|
||||||
beginAtZero: true,
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Montant des sinistres"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
x: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Mois"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Sinistralité
|
|
||||||
const dataLossRatio = <?= $dataLossRatio ?>;
|
const dataLossRatio = <?= $dataLossRatio ?>;
|
||||||
|
|
||||||
new Chart(document.getElementById('lossRatioBar'), {
|
// --- Gestion du bouton Export PDF ---
|
||||||
type: 'bar',
|
const btnExport = document.getElementById('exportPdfBtn');
|
||||||
data: {
|
if (btnExport) {
|
||||||
labels: dataLossRatio.lossRatioLabels,
|
btnExport.addEventListener('click', function () {
|
||||||
datasets: [{
|
// Vérification que la librairie est chargée
|
||||||
label: "Sinistralité (%)",
|
if (!window.jspdf) {
|
||||||
data: dataLossRatio.lossRatioValues
|
alert("Erreur : La librairie jsPDF n'est pas chargée.");
|
||||||
}]
|
return;
|
||||||
},
|
}
|
||||||
options: {
|
|
||||||
scales: {
|
const { jsPDF } = window.jspdf;
|
||||||
y: {
|
const pdf = new jsPDF('p', 'mm', 'a4');
|
||||||
beginAtZero: true,
|
|
||||||
max: 100
|
// --- Logo ---
|
||||||
|
const logo = new Image();
|
||||||
|
logo.src = "<?= $_SESSION['lienLogo'] ?>";
|
||||||
|
logo.onload = function() {
|
||||||
|
try {
|
||||||
|
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 ---
|
||||||
|
pdf.setFontSize(18);
|
||||||
|
pdf.text("<?= _("Tableau de bord - Synthèse") ?>", 10, 20);
|
||||||
|
|
||||||
|
// --- KPIs ---
|
||||||
|
pdf.setFontSize(12);
|
||||||
|
pdf.text("Total Contrats : <?= format_N($kpis['nbPolice']) ?>", 10, 35);
|
||||||
|
pdf.text("Total Assurés :", 10, 42);
|
||||||
|
pdf.text(" Salariés : <?= format_N($kpis['nbAdherent']) ?>", 10, 49);
|
||||||
|
pdf.text(" Ayants droits : <?= format_N($kpis['nbDependant']) ?>", 10, 56);
|
||||||
|
pdf.text("Primes :", 10, 66);
|
||||||
|
pdf.text(" TTC : <?= format_N($kpis['primeTtc']).' '.$_SESSION['devise_C'] ?>", 10, 73);
|
||||||
|
pdf.text(" Nette Stat : <?= format_N($kpis['primeNetteStat']).' '.$_SESSION['devise_C'] ?>", 10, 80);
|
||||||
|
pdf.text("Sinistres :", 10, 90);
|
||||||
|
pdf.text(" Nombre : <?= format_N($kpis['nbSinistres']) ?>", 10, 97);
|
||||||
|
pdf.text(" Montant : <?= format_N($kpis['montantApayer']).' '.$_SESSION['devise_C'] ?>", 10, 104);
|
||||||
|
pdf.text(" Rapport S/P : <?= $kpis['rapportSp'].'%' ?>", 10, 111);
|
||||||
|
|
||||||
|
// --- Graphiques ---
|
||||||
|
addChartToPdf(pdf, 'claimsPie', 'Sinistres par garantie', 125);
|
||||||
|
addChartToPdf(pdf, 'claimsLine', 'Évolution des sinistres mensuels', 200);
|
||||||
|
|
||||||
|
// Nouvelle page pour le dernier graphique
|
||||||
|
pdf.addPage();
|
||||||
|
addChartToPdf(pdf, 'lossRatioBar', 'Sinistralité (%)', 20);
|
||||||
|
|
||||||
|
// --- Sauvegarde ---
|
||||||
|
pdf.save('Tableau_de_bord.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
|
function addChartToPdf(pdf, canvasId, title, startY) {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
if (canvas) {
|
||||||
|
try {
|
||||||
|
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);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("Erreur export graphique " + canvasId, e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
</script>
|
|
||||||
|
|
||||||
|
// --- Initialisation des graphiques ---
|
||||||
|
|
||||||
|
// 1. Sinistres par garantie
|
||||||
|
const ctxPie = document.getElementById('claimsPie');
|
||||||
|
if (ctxPie) {
|
||||||
|
new Chart(ctxPie, {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
labels: dataClaims.claimsLabels,
|
||||||
|
datasets: [{
|
||||||
|
data: dataClaims.claimsValues
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
plugins: {
|
||||||
|
legend: { position: 'right' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Evolution des sinistres par mois
|
||||||
|
const ctxLine = document.getElementById('claimsLine');
|
||||||
|
if (ctxLine) {
|
||||||
|
new Chart(ctxLine, {
|
||||||
|
data: {
|
||||||
|
labels: dataClaimsMonth.months,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
label: "Cumulés",
|
||||||
|
data: dataClaimsMonth.monthlyClaims,
|
||||||
|
borderColor: "blue",
|
||||||
|
backgroundColor: "rgba(0,0,255,0.2)",
|
||||||
|
tension: 0.4,
|
||||||
|
yAxisID: 'y'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
label: "Mensuels",
|
||||||
|
data: dataClaimsMonth.singleClaims,
|
||||||
|
backgroundColor: "rgba(255,0,0,0.5)",
|
||||||
|
borderColor: "red",
|
||||||
|
borderWidth: 1,
|
||||||
|
yAxisID: 'y'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
interaction: {
|
||||||
|
mode: 'index',
|
||||||
|
intersect: false
|
||||||
|
},
|
||||||
|
stacked: false,
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
title: { display: true, text: "Montant des sinistres" }
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
title: { display: true, text: "Mois" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Sinistralité
|
||||||
|
const ctxBar = document.getElementById('lossRatioBar');
|
||||||
|
if (ctxBar) {
|
||||||
|
new Chart(ctxBar, {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: dataLossRatio.lossRatioLabels,
|
||||||
|
datasets: [{
|
||||||
|
label: "Sinistralité (%)",
|
||||||
|
data: dataLossRatio.lossRatioValues
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
max: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})(); // Fin de l'IIFE
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user