feat: aggiunta la sezione "Timeline sostenitori" nella pagina di dettaglio dell'iniziativa

Author: aborruso

LOG.md

@@ -2,6 +2,7 @@
 
 ## 2025-07-09
 
+* Aggiunta la sezione "Timeline sostenitori" nella pagina di dettaglio dell'iniziativa. Questa sezione mostra un grafico con l'andamento temporale del numero di sostenitori ed è visibile solo per le iniziative per cui sono disponibili dati storici.
 * I valori della "Media sostenitori giornalieri" nella tabella e nel grafico lollipop della pagina Numeri sono ora arrotondati a numero intero (firme), senza decimali, per maggiore chiarezza e coerenza.
 
 ## 2025-07-08
@@ -94,4 +95,4 @@
 * Aggiunta la colonna "Data Apertura" nella visualizzazione tabellare delle iniziative.
 * Aggiunto il supporto per l'ordinamento e la visualizzazione del quorum nella tabella delle iniziative.
 * Aggiunto il componente Footer e integrato in tutte le pagine.
-* Aggiunte le informazioni sull'associazione onData nel footer.
+* Aggiunte le informazioni sull'associazione onData nel footer.

src/pages/initiative/[id].astro

@@ -16,6 +16,7 @@ import {
   LinkIcon,
   FlagIcon
 } from '@heroicons/react/24/outline';
+import fs from 'node:fs';
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const initiatives = await fetchInitiatives();
@@ -36,6 +37,11 @@ if (!initiative) {
   return Astro.redirect('/404');
 }
 
+const timeLineRaw = fs.readFileSync('data/time_line.jsonl', 'utf8');
+const timeLineData = timeLineRaw.trim().split('\n').map(JSON.parse);
+const initiativeTimeLine = timeLineData.filter(d => d.id === initiative.id);
+const hasTimeLineData = initiativeTimeLine.length > 0;
+
 // Always use the official URL with the initiative ID for signing
 const officialUrl = `https://firmereferendum.giustizia.it/referendum/open/dettaglio-open/${initiative.id}`;
 const title = String(initiative.titolo || 'Iniziativa');
@@ -233,6 +239,71 @@ const currentUrl = (() => {
         )}
       </div>
 
+      {hasTimeLineData && (
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-8 mb-6 sm:mb-8">
+          <h2 class="text-lg sm:text-xl font-semibold text-gray-900 mb-4">Timeline sostenitori</h2>
+          <div id="chart" class="w-full overflow-x-auto"></div>
+          <script type="module" define:vars={{ timelineData: initiativeTimeLine }}>
+            import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
+
+            const fmtIt = new Intl.NumberFormat("it-IT").format;
+            const fmtDate = d => d.toLocaleDateString("it-IT", {
+              day: "2-digit",
+              month: "short",
+              year: "2-digit"
+            });
+
+            function draw() {
+              const data = timelineData
+                .map(d => ({ ...d, data: new Date(d.data) }))
+                .sort((a, b) => a.data - b.data);
+
+              if (data.length === 0) return;
+
+              const container = document.getElementById("chart");
+              if (!container) return;
+              const { width } = container.getBoundingClientRect();
+
+              const chart = Plot.plot({
+                width,
+                marginLeft: 60,
+                marginBottom: 40,
+                x: {
+                  type: "utc",
+                  label: "Data",
+                  tickFormat: fmtDate
+                },
+                y: {
+                  label: "Sostenitori",
+                  tickFormat: fmtIt,
+                  ticks: 5,
+                  zero: true
+                },
+                marks: [
+                  Plot.line(data, { x: "data", y: "sostenitori", stroke: "#1f77b4" }),
+                  Plot.dot(data, {
+                    x: "data",
+                    y: "sostenitori",
+                    r: 4,
+                    fill: "#1f77b4",
+                    title: d => `sostenitori: ${fmtIt(d.sostenitori)}\n${fmtDate(d.data)}`
+                  })
+                ]
+              });
+
+              container.innerHTML = "";
+              container.append(chart);
+            }
+
+            const chartContainer = document.getElementById("chart");
+            if (chartContainer) {
+              draw();
+              new ResizeObserver(draw).observe(chartContainer);
+            }
+          </script>
+        </div>
+      )}
+
       <!-- Links -->
       <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-8">
         <h2 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4">Link utili</h2>