var
This commit is contained in:
parent
1151c9de6e
commit
9cbf2091f4
167
Js/fonctions.js
167
Js/fonctions.js
|
|
@ -809,7 +809,6 @@ function afficher_adherents_police()
|
||||||
}
|
}
|
||||||
|
|
||||||
function graphique_sinistre() {
|
function graphique_sinistre() {
|
||||||
// Spinner pendant le chargement
|
|
||||||
$("#div_graphique").html(`
|
$("#div_graphique").html(`
|
||||||
<div class="text-center my-5 py-5">
|
<div class="text-center my-5 py-5">
|
||||||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||||||
|
|
@ -820,107 +819,75 @@ function graphique_sinistre() {
|
||||||
`);
|
`);
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: $("#racineWeb").val() + "Ajaxgraphiquesinistres/",
|
url: $("#racineWeb").val() + "Ajaxgraphiquesinistres/?api=1",
|
||||||
type: 'post',
|
type: 'get',
|
||||||
success: function(data, textStatus, jqXHR) {
|
dataType: 'json',
|
||||||
let contentType = jqXHR.getResponseHeader("Content-Type");
|
success: function(data) {
|
||||||
|
$("#div_graphique").empty();
|
||||||
|
|
||||||
if (contentType && contentType.indexOf("application/json") !== -1) {
|
// Construis ton layout HTML ici
|
||||||
// --- Mode JSON ---
|
$("#div_graphique").append(`
|
||||||
$("#div_graphique").empty();
|
<div class="row">
|
||||||
|
<div class="col-md-6 mb-4"><canvas id="claimsChart"></canvas></div>
|
||||||
// Layout responsive Bootstrap
|
<div class="col-md-6 mb-4"><canvas id="claimsMonthChart"></canvas></div>
|
||||||
$("#div_graphique").append(`
|
<div class="col-md-12 mb-4"><canvas id="lossRatioChart"></canvas></div>
|
||||||
<div class="row">
|
|
||||||
<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>
|
|
||||||
`);
|
|
||||||
|
|
||||||
// Graphique 1 : répartition
|
|
||||||
new Chart(document.getElementById('claimsChart'), {
|
|
||||||
type: 'bar',
|
|
||||||
data: {
|
|
||||||
labels: data.claims.claimsLabels,
|
|
||||||
datasets: [{
|
|
||||||
label: 'Nombre de sinistres',
|
|
||||||
data: data.claims.claimsValues,
|
|
||||||
backgroundColor: 'rgba(54, 162, 235, 0.6)'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Graphique 2 : évolution mensuelle
|
|
||||||
new Chart(document.getElementById('claimsMonthChart'), {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: data.claimsMonth.months,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Sinistres mensuels',
|
|
||||||
data: data.claimsMonth.monthlyClaims,
|
|
||||||
borderColor: 'rgba(255, 99, 132, 0.8)',
|
|
||||||
fill: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Sinistres uniques',
|
|
||||||
data: data.claimsMonth.singleClaims,
|
|
||||||
borderColor: 'rgba(75, 192, 192, 0.8)',
|
|
||||||
fill: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Graphique 3 : ratio
|
|
||||||
new Chart(document.getElementById('lossRatioChart'), {
|
|
||||||
type: 'line',
|
|
||||||
data: {
|
|
||||||
labels: data.lossRatio.lossRatioLabels,
|
|
||||||
datasets: [{
|
|
||||||
label: 'Ratio de sinistralité',
|
|
||||||
data: data.lossRatio.lossRatioValues,
|
|
||||||
borderColor: 'rgba(255, 206, 86, 0.8)',
|
|
||||||
fill: false
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// --- Mode Vue HTML ---
|
|
||||||
$("#div_graphique").html(data);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(err) {
|
|
||||||
console.error("Erreur AJAX:", err);
|
|
||||||
$("#div_graphique").html(`
|
|
||||||
<div class="alert alert-danger">
|
|
||||||
Impossible de charger les graphiques.
|
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
|
|
||||||
|
|
||||||
|
// Initialise les graphiques avec Chart.js
|
||||||
|
// Graphique 1 : répartition des sinistres
|
||||||
|
new Chart(document.getElementById('claimsChart'), {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: data.claims.claimsLabels,
|
||||||
|
datasets: [{
|
||||||
|
label: 'Nombre de sinistres',
|
||||||
|
data: data.claims.claimsValues,
|
||||||
|
backgroundColor: 'rgba(54, 162, 235, 0.6)'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Graphique 2 : évolution mensuelle
|
||||||
|
new Chart(document.getElementById('claimsMonthChart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: data.claimsMonth.months,
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: 'Sinistres mensuels',
|
||||||
|
data: data.claimsMonth.monthlyClaims,
|
||||||
|
borderColor: 'rgba(255, 99, 132, 0.8)',
|
||||||
|
fill: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Sinistres uniques',
|
||||||
|
data: data.claimsMonth.singleClaims,
|
||||||
|
borderColor: 'rgba(75, 192, 192, 0.8)',
|
||||||
|
fill: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Graphique 3 : ratio de sinistralité
|
||||||
|
new Chart(document.getElementById('lossRatioChart'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: data.lossRatio.lossRatioLabels,
|
||||||
|
datasets: [{
|
||||||
|
label: 'Ratio de sinistralité',
|
||||||
|
data: data.lossRatio.lossRatioValues,
|
||||||
|
borderColor: 'rgba(255, 206, 86, 0.8)',
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
error: function(err) {
|
||||||
|
$("#div_graphique").html(`<div class="alert alert-danger">Impossible de charger les graphiques.</div>`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -599,7 +599,7 @@ $activeChildId = $menuData['child'];
|
||||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
|
||||||
<!-- Application Scripts -->
|
<!-- Application Scripts -->
|
||||||
<script src="/Js/fonctions.js?ver=2025.12.30.09"></script>
|
<script src="/Js/fonctions.js?ver=2025.12.30.10"></script>
|
||||||
|
|
||||||
<?php if (est_anglophone()): ?>
|
<?php if (est_anglophone()): ?>
|
||||||
<script src="/Js/datepicker-eng.js"></script>
|
<script src="/Js/datepicker-eng.js"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user