radiantrh/Vue/Ajaxgraphiquesinistres/index.php

<!-- Bouton Export PDF -->
<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>

<!-- Graphiques (placeholders) -->
<div class="grid-1">
    <div class="card">
        <h3><?= _('Évolution des sinistres') ?></h3>
        <div class="chart">
            <canvas id="claimsLine"></canvas>
        </div>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <h3><?= _('Sinitralité') ?></h3>
        <div class="chart">
            <canvas id="lossRatioBar"></canvas>
        </div>
    </div>

    <div class="card">
        <h3><?= _('Sinistres par garantie')?></h3>
        <div class="chart">
            <canvas id="claimsPie"></canvas>
        </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.
-->

<script>
// 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 pdf = new jsPDF('p', 'mm', 'a4');

            // --- 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);
            }
        }
    }

    // --- 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>