tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-10-04 17:04:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

ajout api controller, failsafe sur js bubble

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

333
assets/dashboard-charts.js
View file

@ -1,9 +1,176 @@
// 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 waitForChartAndDrawBubble() {
if (!window.Chart || !window.ChartDataLabels) {
setTimeout(waitForChartAndDrawBubble, 50);
return;
}
const chartCanvas = document.getElementById('bubbleChart');
const toggle = document.getElementById('toggleBubbleSize');
function drawBubbleChart(proportional) {
// Détruire toute instance Chart.js existante sur ce canvas (Chart.js v3+)
const existing = window.Chart.getChart(chartCanvas);
if (existing) {
try { existing.destroy(); } catch (e) { console.warn('Erreur destroy Chart:', e); }
}
if (bubbleChart) {
try { bubbleChart.destroy(); } catch (e) { console.warn('Erreur destroy Chart:', e); }
bubbleChart = null;
}
// Forcer le canvas à occuper toute la largeur/hauteur du conteneur en pixels
if (chartCanvas && chartCanvas.parentElement) {
const parentRect = chartCanvas.parentElement.getBoundingClientRect();
console.log('parentRect', parentRect)
chartCanvas.width = (parentRect.width);
chartCanvas.height = (parentRect.height);
chartCanvas.style.width = parentRect.width + 'px';
chartCanvas.style.height = parentRect.height + 'px';
}
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;
let regressionLine = null, slope = 0, intercept = 0;
if (n >= 2) {
let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
validPoints.forEach(d => {
sumX += Math.log10(d.x);
sumY += d.y;
sumXY += Math.log10(d.x) * d.y;
sumXX += Math.log10(d.x) * Math.log10(d.x);
});
const meanX = sumX / n;
const meanY = sumY / n;
slope = (sumXY - n * meanX * meanY) / (sumXX - n * meanX * meanX);
intercept = meanY - slope * meanX;
const xMin = Math.min(...validPoints.map(d => d.x));
const xMax = Math.max(...validPoints.map(d => d.x));
regressionLine = [
{ x: xMin, y: slope * Math.log10(xMin) + intercept },
{ x: xMax, y: slope * Math.log10(xMax) + intercept }
];
}
window.Chart.register(window.ChartDataLabels);
bubbleChart = new window.Chart(chartCanvas.getContext('2d'), {
type: 'bubble',
data: {
datasets: [
{
label: 'Villes',
data: bubbleChartData,
backgroundColor: bubbleChartData.map(d => `rgba(94, 255, 121, ${d.completion / 100})`),
borderColor: 'rgb(94, 255, 121)',
datalabels: {
anchor: 'center',
align: 'center',
color: '#000',
display: true,
font: { weight: '400', size : "12px" },
formatter: (value, context) => {
return context.dataset.data[context.dataIndex].label;
}
}
},
regressionLine ? {
label: 'Régression linéaire',
type: 'line',
data: regressionLine,
borderColor: 'rgba(95, 168, 0, 0.7)',
borderWidth: 2,
pointRadius: 0,
fill: false,
order: 0,
tension: 0,
datalabels: { display: false }
} : null
].filter(Boolean)
},
options: {
// responsive: true,
plugins: {
datalabels: {
// Désactivé au niveau global, activé par dataset
display: false
},
legend: { display: true },
tooltip: {
callbacks: {
label: (context) => {
const d = context.raw;
if (context.dataset.type === 'line') {
return `Régression: y = ${slope.toFixed(2)} × log10(x) + ${intercept.toFixed(2)}`;
}
return [
`${d.label}`,
`Population: ${d.x.toLocaleString()}`,
`Lieux / hab: ${d.y.toFixed(2)}`,
`Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
`Complétion: ${d.completion}%`
];
}
}
}
},
scales: {
x: {
type: 'logarithmic',
title: { display: true, text: 'Population (échelle log)' }
},
y: {
title: { display: true, text: 'Completion' }
}
}
}
});
// Ajout du clic sur une bulle
chartCanvas.onclick = function(evt) {
const points = bubbleChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length > 0) {
const firstPoint = points[0];
const dataIndex = firstPoint.index;
const stat = window.statsDataForBubble[dataIndex];
if (stat && stat.zone) {
window.location.href = '/admin/stats/' + stat.zone;
}
}
};
}
// Initial draw
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);
});
}
}
function getBubbleData(proportional) {
// Générer les données puis trier par rayon décroissant
const data = window.statsDataForBubble.map(stat => {
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;
@ -18,167 +185,13 @@ function getBubbleData(proportional) {
};
});
// Trier du plus gros au plus petit rayon
data.sort((a, b) => b.r - a.r);
if(data){
data.sort((a, b) => b.r - a.r);
}
return data;
}
document.addEventListener('DOMContentLoaded', function() {
function waitForChartAndDrawBubble() {
if (!window.Chart || !window.ChartDataLabels) {
setTimeout(waitForChartAndDrawBubble, 50);
return;
}
const chartCanvas = document.getElementById('bubbleChart');
const toggle = document.getElementById('toggleBubbleSize');
function drawBubbleChart(proportional) {
// Détruire toute instance Chart.js existante sur ce canvas (Chart.js v3+)
const existing = window.Chart.getChart(chartCanvas);
if (existing) {
try { existing.destroy(); } catch (e) { console.warn('Erreur destroy Chart:', e); }
}
if (bubbleChart) {
try { bubbleChart.destroy(); } catch (e) { console.warn('Erreur destroy Chart:', e); }
bubbleChart = null;
}
// Forcer le canvas à occuper toute la largeur/hauteur du conteneur en pixels
if (chartCanvas && chartCanvas.parentElement) {
const parentRect = chartCanvas.parentElement.getBoundingClientRect();
console.log('parentRect', parentRect)
chartCanvas.width = (parentRect.width);
chartCanvas.height = (parentRect.height);
chartCanvas.style.width = parentRect.width + 'px';
chartCanvas.style.height = parentRect.height + 'px';
}
const bubbleChartData = getBubbleData(proportional);
// 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;
let regressionLine = null, slope = 0, intercept = 0;
if (n >= 2) {
let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
validPoints.forEach(d => {
sumX += Math.log10(d.x);
sumY += d.y;
sumXY += Math.log10(d.x) * d.y;
sumXX += Math.log10(d.x) * Math.log10(d.x);
});
const meanX = sumX / n;
const meanY = sumY / n;
slope = (sumXY - n * meanX * meanY) / (sumXX - n * meanX * meanX);
intercept = meanY - slope * meanX;
const xMin = Math.min(...validPoints.map(d => d.x));
const xMax = Math.max(...validPoints.map(d => d.x));
regressionLine = [
{ x: xMin, y: slope * Math.log10(xMin) + intercept },
{ x: xMax, y: slope * Math.log10(xMax) + intercept }
];
}
window.Chart.register(window.ChartDataLabels);
bubbleChart = new window.Chart(chartCanvas.getContext('2d'), {
type: 'bubble',
data: {
datasets: [
{
label: 'Villes',
data: bubbleChartData,
backgroundColor: bubbleChartData.map(d => `rgba(94, 255, 121, ${d.completion / 100})`),
borderColor: 'rgb(94, 255, 121)',
datalabels: {
anchor: 'center',
align: 'center',
color: '#000',
display: true,
font: { weight: '400', size : "1rem" },
formatter: (value, context) => {
return context.dataset.data[context.dataIndex].label;
}
}
},
regressionLine ? {
label: 'Régression linéaire',
type: 'line',
data: regressionLine,
borderColor: 'rgba(162, 255, 40, 0.7)',
borderWidth: 2,
pointRadius: 0,
fill: false,
order: 0,
tension: 0,
datalabels: { display: false }
} : null
].filter(Boolean)
},
options: {
// responsive: true,
plugins: {
datalabels: {
// Désactivé au niveau global, activé par dataset
display: false
},
legend: { display: true },
tooltip: {
callbacks: {
label: (context) => {
const d = context.raw;
if (context.dataset.type === 'line') {
return `Régression: y = ${slope.toFixed(2)} × log10(x) + ${intercept.toFixed(2)}`;
}
return [
`${d.label}`,
`Population: ${d.x.toLocaleString()}`,
`Lieux / hab: ${d.y.toFixed(2)}`,
`Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
`Complétion: ${d.completion}%`
];
}
}
}
},
scales: {
x: {
type: 'logarithmic',
title: { display: true, text: 'Population (échelle log)' }
},
y: {
title: { display: true, text: 'Completion' }
}
}
}
});
// Ajout du clic sur une bulle
chartCanvas.onclick = function(evt) {
const points = bubbleChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length > 0) {
const firstPoint = points[0];
const dataIndex = firstPoint.index;
const stat = window.statsDataForBubble[dataIndex];
if (stat && stat.zone) {
window.location.href = '/admin/stats/' + stat.zone;
}
}
};
}
// Initial draw
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);
});
}
}
waitForChartAndDrawBubble();
});

201
src/Controller/ApiController.php Normal file
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;
}
}

138
templates/admin/stats.html.twig
View file

@ -258,27 +258,27 @@
</div> #}
<div class="completion-info mt-4">
<div class="alert alert-info">
<div class="d-flex align-items-center" style="cursor: pointer;" onclick="toggleCompletionInfo()">
<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>
</div>
<div id="completionInfoContent" style="display: none;" class="mt-3">
<p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
<ul>
<li>Nom du commerce</li>
<li>Adresse complète (numéro, rue, code postal)</li>
<li>Horaires d'ouverture</li>
<li>Site web</li>
<li>Numéro de téléphone</li>
<li>Accessibilité PMR</li>
</ul>
<p>Chaque critère rempli augmente le score de complétion d'une part égale.
Un commerce parfaitement renseigné aura un score de 100%.</p>
</div>
</div>
<div class="alert alert-info">
<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>
</div>
<div id="completionInfoContent" style="display: none;" class="mt-3">
<p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
<ul>
<li>Nom du commerce</li>
<li>Adresse complète (numéro, rue, code postal)</li>
<li>Horaires d'ouverture</li>
<li>Site web</li>
<li>Numéro de téléphone</li>
<li>Accessibilité PMR</li>
</ul>
<p>Chaque critère rempli augmente le score de complétion d'une part égale.
Un commerce parfaitement renseigné aura un score de 100%.</p>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
@ -543,32 +543,50 @@
}
const ctx = container_tags.getContext ? container_tags.getContext('2d') : null;
if(ctx){
new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Répartition des tags',
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
}
type: 'doughnut',
data: {
labels: labels,
datasets: [{
label: 'Répartition des tags',
data: data,
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
}]
},
responsive: true,
maintainAspectRatio: false
}
});
options: {
responsive: true,
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 %}