feat: migliorare la logica di visualizzazione della timeline con formattazione personalizzata delle date

Author: aborruso

src/pages/initiative/[id].astro

@@ -243,8 +243,67 @@ const currentUrl = (() => {
         <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 fmtDateTick = d => d.toLocaleDateString("it-IT", {              day: "2-digit",              month: "short",              year: "2-digit"            });            const fmtDateTooltip = d => d.toLocaleDateString("it-IT", {              day: "numeric",              month: "long",              year: "numeric"            });            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: fmtDateTick                },                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)}
-${fmtDateTooltip(d.data)}`                  })                ]              });              container.innerHTML = "";              container.append(chart);            }            const chartContainer = document.getElementById("chart");            if (chartContainer) {              draw();              new ResizeObserver(draw).observe(chartContainer);            }          </script>
+          <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 fmtDateTooltip = d => d.toLocaleDateString("it-IT", {
+              day: "numeric",
+              month: "long",
+              year: "numeric"
+            });            let lastTick = null;
+            // Definiamo la funzione di formattazione separatamente per evitare errori di parsing
+            const customTickFormat = (d) => {
+              if (!(d instanceof Date) || isNaN(d)) {
+                return "";
+              }
+              const currentTick = d.toLocaleDateString("it-IT", { day: "2-digit", month: "short", year: "2-digit" });
+              if (currentTick === lastTick) {
+                return "";
+              }
+              lastTick = currentTick;
+              return currentTick;
+            };
+            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();
+              lastTick = null; // Reset for each redraw
+              const chart = Plot.plot({
+                width,
+                marginLeft: 60,
+                marginBottom: 40,
+                x: {
+                  type: "utc",
+                  label: "Data",
+                  tickFormat: customTickFormat, // Usiamo la funzione nominata
+                  insetLeft: 20 // Aggiunge padding a sinistra dell'asse x
+                },
+                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)}
+${fmtDateTooltip(d.data)}`
+                  })
+                ]
+              });
+              container.innerHTML = "";
+              container.append(chart);
+            }
+            const chartContainer = document.getElementById("chart");
+            if (chartContainer) {
+              draw();
+              new ResizeObserver(draw).observe(chartContainer);
+            }          </script>
         </div>
       )}