up wiki compare

templates/admin/wiki.html.twig

@@ -171,7 +171,100 @@
             On compte aussi le nombre de sections et de liens.
         </p>
         <div class="mt-3">
-
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h2>Graphe de décrépitude</h2>
+                </div>
+                <div class="card-body">
+                    <canvas id="decrepitudeChart" height="300"></canvas>
+                </div>
+            </div>
         </div>
     </div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Collect data from the table
+            const labels = [];
+            const scores = [];
+            const colors = [];
+            
+            {% for key, languages in wiki_pages %}
+                {% if languages['en'] is defined and languages['fr'] is defined %}
+                    labels.push("{{ key }}");
+                    {% set score = languages['en'].staleness_score|default(0) %}
+                    scores.push({{ score }});
+                    
+                    // Set color based on score
+                    {% if score > 50 %}
+                        colors.push('rgba(220, 53, 69, 0.7)'); // danger
+                    {% elseif score > 20 %}
+                        colors.push('rgba(255, 193, 7, 0.7)'); // warning
+                    {% else %}
+                        colors.push('rgba(25, 135, 84, 0.7)'); // success
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+            
+            // Sort data by score (descending)
+            const indices = Array.from(Array(scores.length).keys())
+                .sort((a, b) => scores[b] - scores[a]);
+                
+            const sortedLabels = indices.map(i => labels[i]);
+            const sortedScores = indices.map(i => scores[i]);
+            const sortedColors = indices.map(i => colors[i]);
+            
+            // Limit to top 20 pages for readability
+            const displayLimit = 20;
+            const displayLabels = sortedLabels.slice(0, displayLimit);
+            const displayScores = sortedScores.slice(0, displayLimit);
+            const displayColors = sortedColors.slice(0, displayLimit);
+            
+            // Create the chart
+            const ctx = document.getElementById('decrepitudeChart').getContext('2d');
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: displayLabels,
+                    datasets: [{
+                        label: 'Score de décrépitude',
+                        data: displayScores,
+                        backgroundColor: displayColors,
+                        borderColor: displayColors.map(c => c.replace('0.7', '1')),
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    indexAxis: 'y',
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return `Score: ${context.raw}`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            beginAtZero: true,
+                            max: 100,
+                            title: {
+                                display: true,
+                                text: 'Score de décrépitude (0-100)'
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
 {% endblock %}