up wiki compare

templates/admin/wiki_archived_proposals.html.twig

@@ -257,6 +257,15 @@
                         </div>
                     </div>
                     {% endif %}
+                    
+                    <div class="row mt-4">
+                        <div class="col-12">
+                            <h4>Répartition des années des propositions</h4>
+                            <div class="chart-container">
+                                <canvas id="yearDistributionChart"></canvas>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             
@@ -578,6 +587,93 @@
                     });
                 }
             }
+            
+            // Initialize year distribution chart
+            const yearChartCanvas = document.getElementById('yearDistributionChart');
+            if (yearChartCanvas) {
+                // Get proposals data from the template
+                const proposals = {{ proposals|json_encode|raw }};
+                
+                if (proposals && proposals.length > 0) {
+                    // Extract years from last_modified dates
+                    const yearCounts = {};
+                    
+                    proposals.forEach(proposal => {
+                        if (proposal.last_modified) {
+                            // Extract year from the date string (format: "DD Month YYYY")
+                            const yearMatch = proposal.last_modified.match(/\d{4}$/);
+                            if (yearMatch) {
+                                const year = yearMatch[0];
+                                yearCounts[year] = (yearCounts[year] || 0) + 1;
+                            }
+                        }
+                    });
+                    
+                    // Sort years chronologically
+                    const sortedYears = Object.keys(yearCounts).sort();
+                    const counts = sortedYears.map(year => yearCounts[year]);
+                    
+                    // Generate a color gradient for the bars
+                    const colors = sortedYears.map((year, index) => {
+                        // Create a gradient from blue to green
+                        const ratio = index / (sortedYears.length - 1 || 1);
+                        return `rgba(${Math.round(33 + (20 * ratio))}, ${Math.round(150 + (50 * ratio))}, ${Math.round(243 - (100 * ratio))}, 0.7)`;
+                    });
+                    
+                    // Create the chart
+                    new Chart(yearChartCanvas, {
+                        type: 'bar',
+                        data: {
+                            labels: sortedYears,
+                            datasets: [{
+                                label: 'Nombre de propositions',
+                                data: counts,
+                                backgroundColor: colors,
+                                borderColor: colors.map(color => color.replace('0.7', '1')),
+                                borderWidth: 1
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            scales: {
+                                y: {
+                                    beginAtZero: true,
+                                    ticks: {
+                                        precision: 0
+                                    },
+                                    title: {
+                                        display: true,
+                                        text: 'Nombre de propositions'
+                                    }
+                                },
+                                x: {
+                                    title: {
+                                        display: true,
+                                        text: 'Année'
+                                    }
+                                }
+                            },
+                            plugins: {
+                                legend: {
+                                    display: false
+                                },
+                                tooltip: {
+                                    callbacks: {
+                                        title: function(context) {
+                                            return `Année ${context[0].label}`;
+                                        },
+                                        label: function(context) {
+                                            const count = context.raw;
+                                            return count > 1 ? `${count} propositions` : `${count} proposition`;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    });
+                }
+            }
         });
     </script>
 {% endblock %}