ajout api controller, failsafe sur js bubble

This commit is contained in:
Tykayn 2025-06-23 23:36:50 +02:00 committed by tykayn
parent adf9daa117
commit 884c190ee5
3 changed files with 469 additions and 203 deletions

View file

@ -1,29 +1,6 @@
// Bubble chart du dashboard avec option de taille de bulle proportionnelle ou égale
let bubbleChart = null; // Déclaré en dehors pour garder la référence
function getBubbleData(proportional) {
// Générer les données puis trier par rayon décroissant
const data = window.statsDataForBubble.map(stat => {
const population = parseInt(stat.population, 10);
const placesCount = parseInt(stat.placesCount, 10);
// const ratio = population > 0 ? (placesCount / population) * 1000 : 0;
const completion = parseInt(stat.completionPercent, 10);
return {
x: population,
y: completion,
r: proportional ? Math.sqrt(placesCount) * 2 : 12,
label: stat.name,
completion: stat.completionPercent || 0,
zone: stat.zone
};
});
// Trier du plus gros au plus petit rayon
data.sort((a, b) => b.r - a.r);
return data;
}
document.addEventListener('DOMContentLoaded', function() {
function waitForChartAndDrawBubble() {
if (!window.Chart || !window.ChartDataLabels) {
setTimeout(waitForChartAndDrawBubble, 50);
@ -58,7 +35,17 @@ document.addEventListener('DOMContentLoaded', function() {
}
if(!getBubbleData){
console.log('pas de getBubbleData')
return ;
}
const bubbleChartData = getBubbleData(proportional);
if(!bubbleChartData){
console.log('pas de bubbleChartData')
return ;
}
// Calcul de la régression linéaire (moindres carrés)
const validPoints = bubbleChartData.filter(d => d.x > 0 && d.y > 0);
const n = validPoints.length;
@ -97,7 +84,7 @@ document.addEventListener('DOMContentLoaded', function() {
align: 'center',
color: '#000',
display: true,
font: { weight: '400', size : "1rem" },
font: { weight: '400', size : "12px" },
formatter: (value, context) => {
return context.dataset.data[context.dataIndex].label;
}
@ -107,7 +94,7 @@ document.addEventListener('DOMContentLoaded', function() {
label: 'Régression linéaire',
type: 'line',
data: regressionLine,
borderColor: 'rgba(162, 255, 40, 0.7)',
borderColor: 'rgba(95, 168, 0, 0.7)',
borderWidth: 2,
pointRadius: 0,
fill: false,
@ -169,16 +156,42 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Initial draw
console.log('[bubble chart] Initialisation avec taille proportionnelle ?', toggle.checked);
console.log('[bubble chart] Initialisation avec taille proportionnelle ?', toggle?.checked);
if(drawBubbleChart){
drawBubbleChart(toggle && toggle.checked);
// Listener
toggle.addEventListener('change', function() {
console.log('[bubble chart] Toggle changé, taille proportionnelle ?', toggle.checked);
drawBubbleChart(toggle.checked);
toggle?.addEventListener('change', function() {
console.log('[bubble chart] Toggle changé, taille proportionnelle ?', toggle?.checked);
drawBubbleChart(toggle?.checked);
});
}
}
function getBubbleData(proportional) {
// Générer les données puis trier par rayon décroissant
const data = window.statsDataForBubble?.map(stat => {
const population = parseInt(stat.population, 10);
const placesCount = parseInt(stat.placesCount, 10);
// const ratio = population > 0 ? (placesCount / population) * 1000 : 0;
const completion = parseInt(stat.completionPercent, 10);
return {
x: population,
y: completion,
r: proportional ? Math.sqrt(placesCount) * 2 : 12,
label: stat.name,
completion: stat.completionPercent || 0,
zone: stat.zone
};
});
// Trier du plus gros au plus petit rayon
if(data){
data.sort((a, b) => b.r - a.r);
}
return data;
}
document.addEventListener('DOMContentLoaded', function() {
waitForChartAndDrawBubble();
});

View file

@ -0,0 +1,201 @@
<?php
namespace App\Controller;
use App\Entity\Stats;
use App\Repository\StatsRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\StreamedResponse;
class ApiController extends AbstractController
{
#[Route('/api/v1/stats_geojson', name: 'api_stats_geojson', methods: ['GET'])]
public function statsGeojson(StatsRepository $statsRepository): JsonResponse
{
$statsList = $statsRepository->findAll();
$features = [];
foreach ($statsList as $stats) {
// Calcul du barycentre des commerces de la zone
$lat = null;
$lon = null;
$places = $stats->getPlaces();
$count = 0;
$sumLat = 0;
$sumLon = 0;
foreach ($places as $place) {
if ($place->getLat() && $place->getLon()) {
$sumLat += $place->getLat();
$sumLon += $place->getLon();
$count++;
}
}
if ($count > 0) {
$lat = $sumLat / $count;
$lon = $sumLon / $count;
}
$feature = [
'type' => 'Feature',
'geometry' => $lat && $lon ? [
'type' => 'Point',
'coordinates' => [$lon, $lat],
] : null,
'properties' => [
'id' => $stats->getId(),
'name' => $stats->getName(),
'zone' => $stats->getZone(),
'completion_percent' => $stats->getCompletionPercent(),
'places_count' => $stats->getPlacesCount(),
'avec_horaires' => $stats->getAvecHoraires(),
'avec_adresse' => $stats->getAvecAdresse(),
'avec_site' => $stats->getAvecSite(),
'avec_accessibilite' => $stats->getAvecAccessibilite(),
'avec_note' => $stats->getAvecNote(),
'population' => $stats->getPopulation(),
'siren' => $stats->getSiren(),
'codeEpci' => $stats->getCodeEpci(),
'codesPostaux' => $stats->getCodesPostaux(),
'date_created' => $stats->getDateCreated() ? $stats->getDateCreated()->format('c') : null,
'date_modified' => $stats->getDateModified() ? $stats->getDateModified()->format('c') : null,
],
];
$features[] = $feature;
}
$geojson = [
'type' => 'FeatureCollection',
'features' => $features,
'meta' => [
'generated_at' => (new \DateTime())->format('c'),
'source' => 'https://osm-commerces.cipherbliss.com/api/v1/stats_geojson'
]
];
return new JsonResponse($geojson, Response::HTTP_OK, [
'Content-Type' => 'application/geo+json'
]);
}
#[Route('/api/v1/stats/{insee}', name: 'api_stats_by_insee', methods: ['GET'])]
public function statsByInsee(StatsRepository $statsRepository, string $insee): JsonResponse
{
$stats = $statsRepository->findOneBy(['zone' => $insee]);
if (!$stats) {
return new JsonResponse(['error' => 'Zone non trouvée'], Response::HTTP_NOT_FOUND);
}
$data = [
'id' => $stats->getId(),
'name' => $stats->getName(),
'zone' => $stats->getZone(),
'completion_percent' => $stats->getCompletionPercent(),
'places_count' => $stats->getPlacesCount(),
'avec_horaires' => $stats->getAvecHoraires(),
'avec_adresse' => $stats->getAvecAdresse(),
'avec_site' => $stats->getAvecSite(),
'avec_accessibilite' => $stats->getAvecAccessibilite(),
'avec_note' => $stats->getAvecNote(),
'population' => $stats->getPopulation(),
'siren' => $stats->getSiren(),
'codeEpci' => $stats->getCodeEpci(),
'codesPostaux' => $stats->getCodesPostaux(),
'date_created' => $stats->getDateCreated() ? $stats->getDateCreated()->format('c') : null,
'date_modified' => $stats->getDateModified() ? $stats->getDateModified()->format('c') : null,
];
return new JsonResponse($data, Response::HTTP_OK);
}
#[Route('/api/v1/stats/{insee}/places', name: 'api_stats_places_by_insee', methods: ['GET'])]
public function statsPlacesByInsee(StatsRepository $statsRepository, string $insee): JsonResponse
{
$stats = $statsRepository->findOneBy(['zone' => $insee]);
if (!$stats) {
return new JsonResponse(['error' => 'Zone non trouvée'], Response::HTTP_NOT_FOUND);
}
$features = [];
foreach ($stats->getPlaces() as $place) {
$lat = $place->getLat();
$lon = $place->getLon();
$feature = [
'type' => 'Feature',
'geometry' => ($lat && $lon) ? [
'type' => 'Point',
'coordinates' => [$lon, $lat],
] : null,
'properties' => [
'id' => $place->getId(),
'name' => $place->getName(),
'main_tag' => $place->getMainTag(),
'osmId' => $place->getOsmId(),
'email' => $place->getEmail(),
'note' => $place->getNote(),
'zip_code' => $place->getZipCode(),
'siret' => $place->getSiret(),
'has_opening_hours' => $place->hasOpeningHours(),
'has_address' => $place->hasAddress(),
'has_website' => $place->hasWebsite(),
'has_wheelchair' => $place->hasWheelchair(),
'has_note' => $place->hasNote(),
'completion_percent' => $place->getCompletionPercentage(),
],
];
$features[] = $feature;
}
$geojson = [
'type' => 'FeatureCollection',
'features' => $features,
'meta' => [
'generated_at' => (new \DateTime())->format('c'),
'source' => 'https://osm-commerces.cipherbliss.com/api/v1/stats/by_insee/' . $insee . '/places'
]
];
return new JsonResponse($geojson, Response::HTTP_OK, [
'Content-Type' => 'application/geo+json'
]);
}
#[Route('/api/v1/stats/by_insee/{insee}/places.csv', name: 'api_stats_places_csv_by_insee', methods: ['GET'])]
public function statsPlacesCsvByInsee(StatsRepository $statsRepository, string $insee): StreamedResponse
{
$stats = $statsRepository->findOneBy(['zone' => $insee]);
if (!$stats) {
$response = new StreamedResponse();
$response->setCallback(function() {
echo 'error\nZone non trouvée';
});
$response->headers->set('Content-Type', 'text/csv');
$response->setStatusCode(Response::HTTP_NOT_FOUND);
return $response;
}
$response = new StreamedResponse(function() use ($stats) {
$handle = fopen('php://output', 'w');
// En-têtes CSV
fputcsv($handle, [
'id', 'name', 'main_tag', 'osmId', 'email', 'note', 'zip_code', 'siret', 'lat', 'lon', 'has_opening_hours', 'has_address', 'has_website', 'has_wheelchair', 'has_note'
]);
foreach ($stats->getPlaces() as $place) {
fputcsv($handle, [
$place->getId(),
$place->getName(),
$place->getMainTag(),
$place->getOsmId(),
$place->getEmail(),
$place->getNote(),
$place->getZipCode(),
$place->getSiret(),
$place->getLat(),
$place->getLon(),
$place->hasOpeningHours(),
$place->hasAddress(),
$place->hasWebsite(),
$place->hasWheelchair(),
$place->hasNote(),
$place->getCompletionPercentage(),
]);
}
fclose($handle);
});
$response->headers->set('Content-Type', 'text/csv');
$response->headers->set('Content-Disposition', 'attachment; filename="places_'.$insee.'.csv"');
return $response;
}
}

View file

@ -259,7 +259,7 @@
<div class="completion-info mt-4">
<div class="alert alert-info">
<div class="d-flex align-items-center" style="cursor: pointer;" onclick="toggleCompletionInfo()">
<div class="d-flex align-items-center completion-hover-trigger" style="cursor: pointer;">
<i class="bi bi-info-circle me-2"></i>
<p class="mb-0">Comment est calculé le score de complétion ?</p>
<i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i>
@ -543,32 +543,50 @@
}
const ctx = container_tags.getContext ? container_tags.getContext('2d') : null;
if(ctx){
new Chart(ctx, {
type: 'bar',
type: 'doughnut',
data: {
labels: labels,
datasets: [{
label: 'Répartition des tags',
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: [
'rgba(54, 162, 235, 0.7)',
'rgba(255, 99, 132, 0.7)',
'rgba(255, 206, 86, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(153, 102, 255, 0.7)',
'rgba(255, 159, 64, 0.7)',
'rgba(201, 203, 207, 0.7)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(201, 203, 207, 1)'
],
borderWidth: 1
}]
},
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
}
},
responsive: true,
maintainAspectRatio: false
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
},
title: {
display: true,
text: 'Répartition des tags principaux'
}
}
}
});
}
// Graphique de distribution du taux de complétion
const completionData = [];
{% for commerce in stats.places %}
@ -622,4 +640,38 @@ if(dc ){
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const trigger = document.querySelector('.completion-hover-trigger');
const content = document.getElementById('completionInfoContent');
const icon = document.getElementById('completionInfoIcon');
if (trigger && content) {
trigger.addEventListener('mouseenter', function() {
content.style.display = 'block';
if (icon) {
icon.classList.remove('bi-chevron-down');
icon.classList.add('bi-chevron-up');
}
});
trigger.addEventListener('mouseleave', function() {
content.style.display = 'none';
if (icon) {
icon.classList.remove('bi-chevron-up');
icon.classList.add('bi-chevron-down');
}
});
// Pour garder la popup ouverte si la souris va sur la popup
content.addEventListener('mouseenter', function() {
content.style.display = 'block';
});
content.addEventListener('mouseleave', function() {
content.style.display = 'none';
if (icon) {
icon.classList.remove('bi-chevron-up');
icon.classList.add('bi-chevron-down');
}
});
}
});
</script>
{% endblock %}