From 0bf30717a49cdadbd8eea4921f0fb120cc6e66b4 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 6 Jun 2025 12:17:03 +0200
Subject: [PATCH] ajout de courbe pour stats

---
 README.md                       |  5 ++-
 src/Entity/History.php          |  4 +-
 templates/admin/stats.html.twig | 80 ++++++++++++++++++++++++++++++++-
 3 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 13fc74d..5d8a22a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # OSM Commerces
 dépot pour faire une démo de "OSM mon commerce", permettant de modifier des commerces sans avoir de compte OSM.
+Ce projet permet d'avoir un tableau de bord pour une zone donnée concernant la completion de commerces et autres lieux d'intérêt amenés à être mis à jour en autonomie par les personnes qui y travaillent.
 
 Configurer .env.local pour mettre le token bearer d'un compte dédié
 installer les dépendances avec composer
@@ -9,8 +10,8 @@ déployer sur un serveur ayant du php 8
 
 - PHP 8.1 ou supérieur
 - Composer
-- PostgreSQL 13 ou supérieur
-- Symfony 6.3
+- PostgreSQL 13 ou supérieur, ou Mysql / MariaDB
+- Symfony 7.2
 - Extensions PHP requises :
   - pdo_pgsql
   - xml
diff --git a/src/Entity/History.php b/src/Entity/History.php
index 8bd3970..5c7b3f9 100644
--- a/src/Entity/History.php
+++ b/src/Entity/History.php
@@ -1,5 +1,7 @@
 <?php
-
+/**
+ * l'histoire note la completion dans le temps d'un lieu
+ */
 namespace App\Entity;
 
 use App\Repository\HistoryRepository;
diff --git a/templates/admin/stats.html.twig b/templates/admin/stats.html.twig
index 61acb2c..0da81c7 100644
--- a/templates/admin/stats.html.twig
+++ b/templates/admin/stats.html.twig
@@ -12,6 +12,10 @@
             stroke: #fff;
             stroke-width: 3;
         }
+        #distribution_completion {
+            height: 300px;
+            margin: 20px 0;
+        }
     </style>
 {% endblock %}
 
@@ -66,6 +70,11 @@
     </div>
     <div class="card mt-4">
 
+
+    
+    <div id="distribution_completion" class="mt-4 mb-4"></div>
+
+
     <div class="row">
         <div class="col-md-6 col-12">
             <h1 class="card-title p-4">Tableau des {{ stats.places |length }} lieux</h1>
@@ -96,6 +105,7 @@
 
 <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
 <script src='{{ asset('js/turf/turf.min.js') }}'></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
     const request = `{{query_places|raw}}`; 
     const zip_code = `{{stats.zone}}`;
@@ -157,6 +167,71 @@
         `;
     }
 
+    function calculateCompletionDistribution(elements) {
+        // Créer des buckets de 10% (0-10%, 10-20%, etc.)
+        const buckets = Array(11).fill(0);
+        
+        elements.forEach(element => {
+            const completion = calculateCompletion(element);
+            const bucketIndex = Math.floor(completion / 10);
+            buckets[bucketIndex]++;
+        });
+
+        return buckets;
+    }
+
+    function createCompletionChart(elements) {
+        const distribution = calculateCompletionDistribution(elements);
+        const ctx = document.createElement('canvas');
+        document.getElementById('distribution_completion').appendChild(ctx);
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['0-10%', '10-20%', '20-30%', '30-40%', '40-50%', '50-60%', '60-70%', '70-80%', '80-90%', '90-100%'],
+                datasets: [{
+                    label: 'Nombre de commerces',
+                    data: distribution,
+                    backgroundColor: 'rgba(0, 128, 0, 0.1)',
+                    borderColor: 'rgba(0, 128, 0, 1)',
+                    borderWidth: 2,
+                    tension: 0.4,
+                    fill: true,
+                    pointBackgroundColor: 'rgba(0, 128, 0, 1)',
+                    pointBorderColor: '#fff',
+                    pointBorderWidth: 2,
+                    pointRadius: 4,
+                    pointHoverRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        title: {
+                            display: true,
+                            text: 'Nombre de commerces'
+                        }
+                    },
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Taux de complétion'
+                        }
+                    }
+                },
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Distribution du taux de complétion des commerces'
+                    }
+                }
+            }
+        });
+    }
+
     async function fetchland() {
         // Requête pour obtenir le contour administratif
         const boundaryQuery = `[out:json][timeout:25];
@@ -179,7 +254,7 @@ out skel qt;`;
 
         const map = new maplibregl.Map({
             container: 'map',
-            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
+            style: 'https://api.maptiler.com/maps/streets-v2/style.json?key={{ maptiler_token }}',
             center: [2.3488, 48.8534],
             zoom: 12
         });
@@ -225,6 +300,9 @@ out skel qt;`;
             console.log('map chargé',data.elements);
             mapElements = data.elements;
 
+            // Créer le graphique de distribution
+            createCompletionChart(data.elements);
+
             document.getElementById('maploader').classList.add('d-none');
 
             // Créer une source pour les cercles