From f7e9576c41dec178c16e7d259a370b4c1282b5ef Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Sun, 23 Nov 2025 15:48:29 +0100
Subject: [PATCH] =?UTF-8?q?page=20de=20stats=20compar=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Controller/ApiController.php              |  53 ++
 src/Controller/FollowUpController.php         |  20 +
 src/Service/Motocultrice.php                  |   5 +
 templates/admin/_city_sidebar.html.twig       |   3 +
 .../admin/followup_detailed_stats.html.twig   | 719 ++++++++++++++++++
 5 files changed, 800 insertions(+)
 create mode 100644 templates/admin/followup_detailed_stats.html.twig

diff --git a/src/Controller/ApiController.php b/src/Controller/ApiController.php
index 654b83eb..aec6055f 100644
--- a/src/Controller/ApiController.php
+++ b/src/Controller/ApiController.php
@@ -332,4 +332,57 @@ class ApiController extends AbstractController
             ], Response::HTTP_INTERNAL_SERVER_ERROR);
         }
     }
+
+    #[Route('/api/v1/stats/{insee}/followup', name: 'api_stats_followup_by_insee', methods: ['GET'])]
+    public function statsFollowupByInsee(StatsRepository $statsRepository, string $insee): JsonResponse
+    {
+        $stats = $statsRepository->findOneBy(['zone' => $insee]);
+        if (!$stats) {
+            return new JsonResponse(['error' => 'Zone non trouvée'], Response::HTTP_NOT_FOUND);
+        }
+
+        $followups = $stats->getCityFollowUps();
+        $themes = \App\Service\FollowUpService::getFollowUpThemes();
+        
+        // Organiser les données par thématique
+        $data = [
+            'city' => [
+                'id' => $stats->getId(),
+                'name' => $stats->getName(),
+                'zone' => $stats->getZone(),
+            ],
+            'themes' => []
+        ];
+
+        foreach ($themes as $theme => $label) {
+            $countSeries = [];
+            $completionSeries = [];
+
+            foreach ($followups as $fu) {
+                if ($fu->getName() === $theme . '_count') {
+                    $countSeries[] = [
+                        'date' => $fu->getDate()->format('Y-m-d'),
+                        'value' => $fu->getMeasure()
+                    ];
+                } elseif ($fu->getName() === $theme . '_completion') {
+                    $completionSeries[] = [
+                        'date' => $fu->getDate()->format('Y-m-d'),
+                        'value' => $fu->getMeasure()
+                    ];
+                }
+            }
+
+            // Trier par date
+            usort($countSeries, fn($a, $b) => strcmp($a['date'], $b['date']));
+            usort($completionSeries, fn($a, $b) => strcmp($a['date'], $b['date']));
+
+            $data['themes'][$theme] = [
+                'label' => $label,
+                'count' => $countSeries,
+                'completion' => $completionSeries
+            ];
+        }
+
+        return new JsonResponse($data, Response::HTTP_OK);
+    }
 } 
\ No newline at end of file
diff --git a/src/Controller/FollowUpController.php b/src/Controller/FollowUpController.php
index 0c24ba4c..5fcf1f87 100644
--- a/src/Controller/FollowUpController.php
+++ b/src/Controller/FollowUpController.php
@@ -368,4 +368,24 @@ class FollowUpController extends AbstractController
             'json_url' => 'https://complete-tes-commerces.fr/13/13001-aix-en-provence/json/aix-en-provence_last_stats.json'
         ]);
     }
+
+    #[Route('/admin/followup/{insee_code}/detailed-stats', name: 'admin_followup_detailed_stats', requirements: ['insee_code' => '\\d+'])]
+    #[Route('/admin/stats/{insee_code}/detailed-stats', name: 'admin_stats_detailed_stats', requirements: ['insee_code' => '\\d+'])]
+    public function detailedStats(
+        string                 $insee_code,
+        EntityManagerInterface $em
+    ): Response
+    {
+        $stats = $em->getRepository(Stats::class)->findOneBy(['zone' => $insee_code]);
+        if (!$stats) {
+            $this->addFlash('error', 'Aucune stats trouvée pour ce code INSEE.');
+            return $this->redirectToRoute('app_admin');
+        }
+
+        return $this->render('admin/followup_detailed_stats.html.twig', [
+            'stats' => $stats,
+            'followup_labels' => FollowUpService::getFollowUpThemes(),
+            'followup_icons' => FollowUpService::getFollowUpIcons(),
+        ]);
+    }
 } 
diff --git a/src/Service/Motocultrice.php b/src/Service/Motocultrice.php
index f82745c7..2a5e241c 100644
--- a/src/Service/Motocultrice.php
+++ b/src/Service/Motocultrice.php
@@ -626,6 +626,11 @@ area["ref:INSEE"="$zone"]->.searchArea;
   nwr["amenity"="drinking_water"](area.searchArea);
   nwr["natural"="tree"](area.searchArea);
   nw["power"="pole"](area.searchArea);
+  nwr["manhole"](area.searchArea);
+  nwr["amenity"="public_bookcase"](area.searchArea);
+  nwr["leisure"="playground"](area.searchArea);
+  nwr["amenity"="restaurant"](area.searchArea);
+  nwr["ref:FR:RNB"](area.searchArea);
 );
 (._;>;);
 out meta;
diff --git a/templates/admin/_city_sidebar.html.twig b/templates/admin/_city_sidebar.html.twig
index 73b0b6b7..74980b97 100644
--- a/templates/admin/_city_sidebar.html.twig
+++ b/templates/admin/_city_sidebar.html.twig
@@ -54,6 +54,9 @@
         <a class="nav-link {% if active_menu == 'followup_graph' %}active{% endif %}" href="{{ path('admin_followup_graph', {'insee_code': stats.zone}) }}">
             <i class="bi bi-graph-up"></i> Suivi OSM (graphes)
         </a>
+        <a class="nav-link {% if active_menu == 'followup_detailed_stats' %}active{% endif %}" href="{{ path('admin_followup_detailed_stats', {'insee_code': stats.zone}) }}">
+            <i class="bi bi-graph-up-arrow"></i> Stats détaillées (comparatif)
+        </a>
         <a class="nav-link {% if active_menu == 'stats_evolutions' %}active{% endif %}" href="{{ path('app_public_stats_evolutions', {'insee_code': stats.zone}) }}">
             <i class="bi bi-activity"></i> Évolutions des objets
         </a>
diff --git a/templates/admin/followup_detailed_stats.html.twig b/templates/admin/followup_detailed_stats.html.twig
new file mode 100644
index 00000000..0531122d
--- /dev/null
+++ b/templates/admin/followup_detailed_stats.html.twig
@@ -0,0 +1,719 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Stats détaillées - {{ stats.name }}{% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet'/>
+{% endblock %}
+
+{% block body %}
+    <div class="container-fluid">
+        <div class="row">
+            <!-- Sidebar de navigation -->
+            <div class="col-12">
+                {% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'followup_detailed_stats'} %}
+            </div>
+
+            <!-- Contenu principal -->
+            <div class="col-md-9 col-lg-10 main-content">
+                <div class="p-4">
+                    <h1>Stats détaillées - {{ stats.name }} ({{ stats.zone }})</h1>
+                    <p class="text-muted">Sélectionnez les thématiques à afficher pour comparer les courbes de décompte et complétion.</p>
+
+                    <!-- Sélection des thématiques -->
+                    <div class="card mb-4">
+                        <div class="card-header">
+                            <h5 class="mb-0"><i class="bi bi-check2-square"></i> Sélection des thématiques</h5>
+                        </div>
+                        <div class="card-body">
+                            <div class="row">
+                                {% for theme, label in followup_labels %}
+                                    <div class="col-md-4 col-lg-3 mb-2">
+                                        <div class="form-check">
+                                            <input class="form-check-input theme-checkbox" type="checkbox" 
+                                                   value="{{ theme }}" id="theme_{{ theme }}"
+                                                   data-label="{{ label }}"
+                                                   data-icon="{{ followup_icons[theme]|default('bi-question-circle') }}">
+                                            <label class="form-check-label" for="theme_{{ theme }}">
+                                                <i class="bi {{ followup_icons[theme]|default('bi-question-circle') }}"></i> {{ label }}
+                                            </label>
+                                        </div>
+                                    </div>
+                                {% endfor %}
+                            </div>
+                            <div class="mt-3">
+                                <button type="button" class="btn btn-sm btn-outline-primary" id="selectAll">Tout sélectionner</button>
+                                <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAll">Tout désélectionner</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Options d'affichage -->
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <div class="mb-3">
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="showCount" checked>
+                                    <label class="form-check-label" for="showCount">
+                                        Afficher les décomptes
+                                    </label>
+                                </div>
+                                <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" id="showCompletion" checked>
+                                    <label class="form-check-label" for="showCompletion">
+                                        Afficher les complétions
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="separateCharts" checked>
+                                <label class="form-check-label" for="separateCharts">
+                                    Afficher deux graphiques séparés (décomptes et complétions)
+                                </label>
+                            </div>
+                            <small class="text-muted">Décochez pour afficher un seul graphique combiné avec deux axes Y</small>
+                        </div>
+                    </div>
+
+                    <!-- Graphique combiné (un seul) -->
+                    <div class="card mb-4" id="combinedChartCard" style="display: none;">
+                        <div class="card-header">
+                            <h5 class="mb-0"><i class="bi bi-graph-up"></i> Graphique combiné</h5>
+                        </div>
+                        <div class="card-body">
+                            <div id="combinedChartContainer">
+                                <canvas id="combinedChart" style="max-height: 500px;"></canvas>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Graphique des décomptes -->
+                    <div class="card mb-4" id="countChartCard">
+                        <div class="card-header">
+                            <h5 class="mb-0"><i class="bi bi-bar-chart"></i> Graphique des décomptes</h5>
+                        </div>
+                        <div class="card-body">
+                            <div id="countChartContainer">
+                                <canvas id="countChart" style="max-height: 500px;"></canvas>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Graphique des complétions -->
+                    <div class="card" id="completionChartCard">
+                        <div class="card-header">
+                            <h5 class="mb-0"><i class="bi bi-percent"></i> Graphique des complétions (%)</h5>
+                        </div>
+                        <div class="card-body">
+                            <div id="completionChartContainer">
+                                <canvas id="completionChart" style="max-height: 500px;"></canvas>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-3">
+                        <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}"
+                           class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Retour à la fiche ville</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script src="/js/chartjs/chart.umd.js"></script>
+    <script src="/js/chartjs/chartjs-adapter-date-fns.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
+    <script>
+        const inseeCode = '{{ stats.zone }}';
+        const apiUrl = '{{ path('api_stats_followup_by_insee', {'insee': stats.zone}) }}';
+        let countChartInstance = null;
+        let completionChartInstance = null;
+        let combinedChartInstance = null;
+        let allData = null;
+
+        // Couleurs pour les différentes thématiques
+        const colors = [
+            { count: 'rgba(54, 162, 235, 1)', completion: 'rgba(75, 192, 192, 1)' },
+            { count: 'rgba(255, 99, 132, 1)', completion: 'rgba(255, 159, 64, 1)' },
+            { count: 'rgba(153, 102, 255, 1)', completion: 'rgba(201, 203, 207, 1)' },
+            { count: 'rgba(255, 205, 86, 1)', completion: 'rgba(54, 162, 235, 0.5)' },
+            { count: 'rgba(75, 192, 192, 1)', completion: 'rgba(255, 99, 132, 0.5)' },
+            { count: 'rgba(255, 159, 64, 1)', completion: 'rgba(153, 102, 255, 0.5)' },
+            { count: 'rgba(201, 203, 207, 1)', completion: 'rgba(255, 205, 86, 0.5)' },
+            { count: 'rgba(255, 99, 132, 0.5)', completion: 'rgba(75, 192, 192, 0.5)' },
+        ];
+
+        // Charger les données depuis l'API
+        async function loadData() {
+            try {
+                console.log('Chargement des données depuis:', apiUrl);
+                const response = await fetch(apiUrl);
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    console.error('Erreur HTTP:', response.status, errorText);
+                    throw new Error(`Erreur ${response.status}: ${errorText}`);
+                }
+                allData = await response.json();
+                console.log('Données chargées:', allData);
+                updateChart();
+            } catch (error) {
+                console.error('Erreur:', error);
+                const countContainer = document.getElementById('countChartContainer');
+                const completionContainer = document.getElementById('completionChartContainer');
+                if (countContainer) {
+                    countContainer.innerHTML = '<p class="text-danger">Erreur lors du chargement des données: ' + error.message + '</p>';
+                }
+                if (completionContainer) {
+                    completionContainer.innerHTML = '<p class="text-danger">Erreur lors du chargement des données: ' + error.message + '</p>';
+                }
+            }
+        }
+
+        // Mettre à jour les graphiques
+        function updateChart() {
+            if (!allData) {
+                console.warn('Aucune donnée chargée');
+                return;
+            }
+
+            const showCount = document.getElementById('showCount').checked;
+            const showCompletion = document.getElementById('showCompletion').checked;
+            const separateCharts = document.getElementById('separateCharts').checked;
+            const selectedThemes = Array.from(document.querySelectorAll('.theme-checkbox:checked'))
+                .map(cb => cb.value);
+
+            // Afficher/masquer les conteneurs selon le mode
+            const combinedCard = document.getElementById('combinedChartCard');
+            const countCard = document.getElementById('countChartCard');
+            const completionCard = document.getElementById('completionChartCard');
+            
+            if (separateCharts) {
+                combinedCard.style.display = 'none';
+                countCard.style.display = showCount ? 'block' : 'none';
+                completionCard.style.display = showCompletion ? 'block' : 'none';
+            } else {
+                combinedCard.style.display = (showCount || showCompletion) ? 'block' : 'none';
+                countCard.style.display = 'none';
+                completionCard.style.display = 'none';
+            }
+
+            if (selectedThemes.length === 0) {
+                // Détruire les graphiques existants
+                if (countChartInstance) {
+                    countChartInstance.destroy();
+                    countChartInstance = null;
+                }
+                if (completionChartInstance) {
+                    completionChartInstance.destroy();
+                    completionChartInstance = null;
+                }
+                if (combinedChartInstance) {
+                    combinedChartInstance.destroy();
+                    combinedChartInstance = null;
+                }
+                document.getElementById('countChartContainer').innerHTML = '<p class="text-muted">Sélectionnez au moins une thématique pour afficher le graphique.</p>';
+                document.getElementById('completionChartContainer').innerHTML = '<p class="text-muted">Sélectionnez au moins une thématique pour afficher le graphique.</p>';
+                document.getElementById('combinedChartContainer').innerHTML = '<p class="text-muted">Sélectionnez au moins une thématique pour afficher le graphique.</p>';
+                return;
+            }
+
+            // Préparer les données pour les décomptes
+            const countDatasets = [];
+            const completionDatasets = [];
+            let colorIndex = 0;
+
+            selectedThemes.forEach(theme => {
+                const themeData = allData.themes[theme];
+                if (!themeData) {
+                    console.warn(`Pas de données pour le thème: ${theme}`);
+                    return;
+                }
+
+                const checkbox = document.getElementById('theme_' + theme);
+                const label = checkbox ? checkbox.dataset.label : theme;
+                const color = colors[colorIndex % colors.length];
+
+                // Graphique des décomptes (seulement si showCount est coché)
+                if (showCount && themeData.count && themeData.count.length > 0) {
+                    countDatasets.push({
+                        label: label,
+                        data: themeData.count.map(d => ({ x: d.date, y: d.value })),
+                        borderColor: color.count,
+                        backgroundColor: color.count.replace('1)', '0.1)'),
+                        fill: false,
+                        tension: 0.3,
+                    });
+                }
+
+                // Graphique des complétions (seulement si showCompletion est coché)
+                if (showCompletion && themeData.completion && themeData.completion.length > 0) {
+                    completionDatasets.push({
+                        label: label,
+                        data: themeData.completion.map(d => ({ x: d.date, y: d.value })),
+                        borderColor: color.completion,
+                        backgroundColor: color.completion.replace('1)', '0.1)'),
+                        fill: false,
+                        tension: 0.3,
+                    });
+                }
+
+                colorIndex++;
+            });
+
+            if (separateCharts) {
+                // Créer/mettre à jour les graphiques séparés selon les cases cochées
+                if (showCount) {
+                    updateCountChart(countDatasets);
+                } else {
+                    if (countChartInstance) {
+                        countChartInstance.destroy();
+                        countChartInstance = null;
+                    }
+                }
+                
+                if (showCompletion) {
+                    updateCompletionChart(completionDatasets);
+                } else {
+                    if (completionChartInstance) {
+                        completionChartInstance.destroy();
+                        completionChartInstance = null;
+                    }
+                }
+                
+                // Détruire le graphique combiné s'il existe
+                if (combinedChartInstance) {
+                    combinedChartInstance.destroy();
+                    combinedChartInstance = null;
+                }
+            } else {
+                // Créer/mettre à jour le graphique combiné
+                if (showCount || showCompletion) {
+                    updateCombinedChart(countDatasets, completionDatasets);
+                } else {
+                    if (combinedChartInstance) {
+                        combinedChartInstance.destroy();
+                        combinedChartInstance = null;
+                    }
+                }
+                
+                // Détruire les graphiques séparés s'ils existent
+                if (countChartInstance) {
+                    countChartInstance.destroy();
+                    countChartInstance = null;
+                }
+                if (completionChartInstance) {
+                    completionChartInstance.destroy();
+                    completionChartInstance = null;
+                }
+            }
+        }
+
+        // Mettre à jour le graphique des décomptes
+        function updateCountChart(datasets) {
+            const container = document.getElementById('countChartContainer');
+            if (!container) return;
+
+            if (datasets.length === 0) {
+                if (countChartInstance) {
+                    countChartInstance.destroy();
+                    countChartInstance = null;
+                }
+                container.innerHTML = '<p class="text-muted">Aucune donnée de décompte disponible pour les thématiques sélectionnées.</p>';
+                return;
+            }
+
+            // Restaurer le canvas si nécessaire
+            if (container.innerHTML.includes('<p')) {
+                container.innerHTML = '<canvas id="countChart" style="max-height: 500px;"></canvas>';
+            }
+
+            const canvas = document.getElementById('countChart');
+            if (!canvas) {
+                console.error('Impossible de trouver le canvas des décomptes');
+                return;
+            }
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Impossible d\'obtenir le contexte 2D pour les décomptes');
+                return;
+            }
+
+            if (countChartInstance) {
+                countChartInstance.destroy();
+            }
+
+            try {
+                countChartInstance = new Chart(ctx, {
+                    type: 'line',
+                    data: { datasets },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        parsing: {
+                            xAxisKey: 'x',
+                            yAxisKey: 'y'
+                        },
+                        plugins: {
+                            legend: {
+                                display: true,
+                                position: 'top',
+                            },
+                            tooltip: {
+                                mode: 'index',
+                                intersect: false,
+                                callbacks: {
+                                    title: function(context) {
+                                        if (context && context.length > 0 && context[0].parsed && context[0].parsed.x) {
+                                            return new Date(context[0].parsed.x).toLocaleDateString('fr-FR');
+                                        }
+                                        return '';
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            x: {
+                                type: 'time',
+                                time: {
+                                    unit: 'day',
+                                    displayFormats: {
+                                        day: 'dd/MM/yyyy'
+                                    }
+                                },
+                                title: {
+                                    display: true,
+                                    text: 'Date'
+                                }
+                            },
+                            y: {
+                                type: 'linear',
+                                position: 'left',
+                                title: {
+                                    display: true,
+                                    text: "Nombre d'objets"
+                                },
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+                console.log('Graphique des décomptes créé avec succès', datasets.length, 'datasets');
+            } catch (error) {
+                console.error('Erreur lors de la création du graphique des décomptes:', error);
+            }
+        }
+
+        // Mettre à jour le graphique des complétions
+        function updateCompletionChart(datasets) {
+            const container = document.getElementById('completionChartContainer');
+            if (!container) return;
+
+            if (datasets.length === 0) {
+                if (completionChartInstance) {
+                    completionChartInstance.destroy();
+                    completionChartInstance = null;
+                }
+                container.innerHTML = '<p class="text-muted">Aucune donnée de complétion disponible pour les thématiques sélectionnées.</p>';
+                return;
+            }
+
+            // Restaurer le canvas si nécessaire
+            if (container.innerHTML.includes('<p')) {
+                container.innerHTML = '<canvas id="completionChart" style="max-height: 500px;"></canvas>';
+            }
+
+            const canvas = document.getElementById('completionChart');
+            if (!canvas) {
+                console.error('Impossible de trouver le canvas des complétions');
+                return;
+            }
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Impossible d\'obtenir le contexte 2D pour les complétions');
+                return;
+            }
+
+            if (completionChartInstance) {
+                completionChartInstance.destroy();
+            }
+
+            try {
+                completionChartInstance = new Chart(ctx, {
+                    type: 'line',
+                    data: { datasets },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        parsing: {
+                            xAxisKey: 'x',
+                            yAxisKey: 'y'
+                        },
+                        plugins: {
+                            legend: {
+                                display: true,
+                                position: 'top',
+                            },
+                            tooltip: {
+                                mode: 'index',
+                                intersect: false,
+                                callbacks: {
+                                    title: function(context) {
+                                        if (context && context.length > 0 && context[0].parsed && context[0].parsed.x) {
+                                            return new Date(context[0].parsed.x).toLocaleDateString('fr-FR');
+                                        }
+                                        return '';
+                                    },
+                                    label: function(context) {
+                                        return context.dataset.label + ': ' + context.parsed.y.toFixed(1) + '%';
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            x: {
+                                type: 'time',
+                                time: {
+                                    unit: 'day',
+                                    displayFormats: {
+                                        day: 'dd/MM/yyyy'
+                                    }
+                                },
+                                title: {
+                                    display: true,
+                                    text: 'Date'
+                                }
+                            },
+                            y: {
+                                type: 'linear',
+                                position: 'left',
+                                title: {
+                                    display: true,
+                                    text: 'Complétion (%)'
+                                },
+                                min: 0,
+                                max: 100,
+                                ticks: {
+                                    callback: function(value) {
+                                        return value + '%';
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+                console.log('Graphique des complétions créé avec succès', datasets.length, 'datasets');
+            } catch (error) {
+                console.error('Erreur lors de la création du graphique des complétions:', error);
+            }
+        }
+
+        // Mettre à jour le graphique combiné
+        function updateCombinedChart(countDatasets, completionDatasets) {
+            const container = document.getElementById('combinedChartContainer');
+            if (!container) return;
+
+            const showCount = document.getElementById('showCount').checked;
+            const showCompletion = document.getElementById('showCompletion').checked;
+
+            // Combiner les datasets
+            const allDatasets = [];
+            let colorIndex = 0;
+
+            // Ajouter les datasets de décompte (seulement si showCount est coché)
+            if (showCount) {
+                countDatasets.forEach(dataset => {
+                    allDatasets.push({
+                        ...dataset,
+                        borderColor: colors[colorIndex % colors.length].count,
+                        backgroundColor: colors[colorIndex % colors.length].count.replace('1)', '0.1)'),
+                        yAxisID: 'y',
+                    });
+                    colorIndex++;
+                });
+            }
+
+            // Réinitialiser l'index pour les complétions si on a des décomptes
+            if (!showCount) {
+                colorIndex = 0;
+            }
+            
+            // Ajouter les datasets de complétion (seulement si showCompletion est coché)
+            if (showCompletion) {
+                completionDatasets.forEach(dataset => {
+                    allDatasets.push({
+                        ...dataset,
+                        borderColor: colors[colorIndex % colors.length].completion,
+                        backgroundColor: colors[colorIndex % colors.length].completion.replace('1)', '0.1)'),
+                        yAxisID: showCount ? 'y1' : 'y', // Utiliser y1 seulement si on a aussi des décomptes
+                        borderDash: showCount ? [5, 5] : [], // Pointillés seulement si on a aussi des décomptes
+                    });
+                    colorIndex++;
+                });
+            }
+
+            if (allDatasets.length === 0) {
+                if (combinedChartInstance) {
+                    combinedChartInstance.destroy();
+                    combinedChartInstance = null;
+                }
+                container.innerHTML = '<p class="text-muted">Aucune donnée disponible pour les thématiques sélectionnées.</p>';
+                return;
+            }
+
+            // Restaurer le canvas si nécessaire
+            if (container.innerHTML.includes('<p')) {
+                container.innerHTML = '<canvas id="combinedChart" style="max-height: 500px;"></canvas>';
+            }
+
+            const canvas = document.getElementById('combinedChart');
+            if (!canvas) {
+                console.error('Impossible de trouver le canvas combiné');
+                return;
+            }
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                console.error('Impossible d\'obtenir le contexte 2D pour le graphique combiné');
+                return;
+            }
+
+            if (combinedChartInstance) {
+                combinedChartInstance.destroy();
+            }
+
+            try {
+                combinedChartInstance = new Chart(ctx, {
+                    type: 'line',
+                    data: { datasets: allDatasets },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: true,
+                        parsing: {
+                            xAxisKey: 'x',
+                            yAxisKey: 'y'
+                        },
+                        plugins: {
+                            legend: {
+                                display: true,
+                                position: 'top',
+                            },
+                            tooltip: {
+                                mode: 'index',
+                                intersect: false,
+                                callbacks: {
+                                    title: function(context) {
+                                        if (context && context.length > 0 && context[0].parsed && context[0].parsed.x) {
+                                            return new Date(context[0].parsed.x).toLocaleDateString('fr-FR');
+                                        }
+                                        return '';
+                                    },
+                                    label: function(context) {
+                                        let label = context.dataset.label || '';
+                                        if (context.parsed.y !== null) {
+                                            // Si c'est une complétion (axe y1), ajouter le %
+                                            if (context.dataset.yAxisID === 'y1') {
+                                                label += ': ' + context.parsed.y.toFixed(1) + '%';
+                                            } else {
+                                                label += ': ' + context.parsed.y;
+                                            }
+                                        }
+                                        return label;
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            x: {
+                                type: 'time',
+                                time: {
+                                    unit: 'day',
+                                    displayFormats: {
+                                        day: 'dd/MM/yyyy'
+                                    }
+                                },
+                                title: {
+                                    display: true,
+                                    text: 'Date'
+                                }
+                            },
+                            y: {
+                                type: 'linear',
+                                position: 'left',
+                                title: {
+                                    display: true,
+                                    text: showCount && showCompletion ? "Nombre d'objets" : (showCount ? "Nombre d'objets" : 'Complétion (%)')
+                                },
+                                beginAtZero: showCount || !showCompletion,
+                                ...(showCompletion && !showCount ? {
+                                    min: 0,
+                                    max: 100,
+                                    ticks: {
+                                        callback: function(value) {
+                                            return value + '%';
+                                        }
+                                    }
+                                } : {})
+                            },
+                            ...(showCount && showCompletion ? {
+                                y1: {
+                                    type: 'linear',
+                                    position: 'right',
+                                    title: {
+                                        display: true,
+                                        text: 'Complétion (%)'
+                                    },
+                                    min: 0,
+                                    max: 100,
+                                    grid: {
+                                        drawOnChartArea: false
+                                    },
+                                    ticks: {
+                                        callback: function(value) {
+                                            return value + '%';
+                                        }
+                                    }
+                                }
+                            } : {})
+                        }
+                    }
+                });
+                console.log('Graphique combiné créé avec succès', allDatasets.length, 'datasets');
+            } catch (error) {
+                console.error('Erreur lors de la création du graphique combiné:', error);
+            }
+        }
+
+        // Événements
+        document.addEventListener('DOMContentLoaded', function() {
+            loadData();
+
+            // Écouter les changements de sélection
+            document.querySelectorAll('.theme-checkbox').forEach(cb => {
+                cb.addEventListener('change', updateChart);
+            });
+
+            // Écouter les changements d'options d'affichage
+            document.getElementById('showCount').addEventListener('change', updateChart);
+            document.getElementById('showCompletion').addEventListener('change', updateChart);
+            document.getElementById('separateCharts').addEventListener('change', updateChart);
+
+            // Boutons sélection/désélection
+            document.getElementById('selectAll').addEventListener('click', function() {
+                document.querySelectorAll('.theme-checkbox').forEach(cb => cb.checked = true);
+                updateChart();
+            });
+
+            document.getElementById('deselectAll').addEventListener('click', function() {
+                document.querySelectorAll('.theme-checkbox').forEach(cb => cb.checked = false);
+                updateChart();
+            });
+        });
+    </script>
+{% endblock %}
+