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>


<!-- 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>
    document.getElementById('exportPdfBtn').addEventListener('click', function () {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF('p', 'mm', 'a4');

        // --- Logo ---
        const logo = new Image();
        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 ?>;
    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 ?>;

    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 ?>;

    new Chart(document.getElementById('lossRatioBar'), {
        type: 'bar',
        data: {
            labels: dataLossRatio.lossRatioLabels,
            datasets: [{
                label: "Sinistralité (%)",
                data: dataLossRatio.lossRatioValues
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
</script>