@sailingrotevista/rotevista-dash 6.2.6 → 6.2.8

package/index.js

@@ -559,21 +559,22 @@ module.exports = function (app) {
    * Raccoglie i 30 record da 1 minuto, estrae i picchi, unisce gli angoli
    * e applica la scrematura del percentile al 5% prima di salvare lo slot.
    */
-  function freeze30mSlot(slotTimestamp) {
-    const startTime = slotTimestamp;
-    const endTime = slotTimestamp + 1800000; // 30 minuti in millisecondi
+    function freeze30mSlot(slotTimestamp) {
+        const startTime = slotTimestamp;
+        const endTime = slotTimestamp + 1800000; // 30 minuti in millisecondi
 
-    // 1. Estrae i record storici del TWD e del TWS che ricadono in quella mezz'ora
-    const twdPoints = histories['twd'].filter(p => p.time >= startTime && p.time < endTime);
-    const twsPoints = histories['tws'].filter(p => p.time >= startTime && p.time < endTime);
+        // 1. Estrae i record storici del TWD e del TWS che ricadono in quella mezz'ora
+        const twdPoints = histories['twd'].filter(p => p.time >= startTime && p.time < endTime);
+        const twsPoints = histories['tws'].filter(p => p.time >= startTime && p.time < endTime);
 
-    if (twdPoints.length === 0) return; // Se non ci sono dati, salta lo slot
+        if (twdPoints.length === 0) return; // Se non ci sono dati, salta lo slot
 
-    // 2. Calcola il vento massimo sostenuto (in nodi) registrato nel periodo
-    const twsVals = twsPoints.map(p => p.val).filter(v => isFinite(v));
-    const maxTws = twsVals.length > 0 ? Math.max(...twsVals) : 0;
+        // 2. Calcola il vento massimo sostenuto (in nodi) registrato nel periodo
+        const twsVals = twsPoints.map(p => p.val).filter(v => isFinite(v));
+        const maxTws = twsVals.length > 0 ? Math.max(...twsVals) : 0;
+        const minTws = twsVals.length > 0 ? Math.min(...twsVals) : 0; // Chirurgico: Calcoliamo il vento minimo del periodo
 
-    // 3. Estrae tutti gli estremi angolari catturati minuto per minuto
+        // 3. Estrae tutti gli estremi angolari catturati minuto per minuto
     let allAngles = [];
     twdPoints.forEach(p => {
       allAngles.push(p.val);
@@ -611,15 +612,16 @@ module.exports = function (app) {
     const finalMin = (finalAvg + minDiff + Math.PI * 2) % (Math.PI * 2);
     const finalMax = (finalAvg + maxDiff + Math.PI * 2) % (Math.PI * 2);
 
-    // 7. Salva l'arco compresso e pulito nello store dedicato
-    windRadarSlots.push({
-      timestamp: startTime,
-      twdMin: finalMin,
-      twdMax: finalMax,
-      twsPeak: maxTws
-    });
+        // 7. Salva l'arco compresso e pulito nello store dedicato
+            windRadarSlots.push({
+              timestamp: startTime,
+              twdMin: finalMin,
+              twdMax: finalMax,
+              twsPeak: maxTws,
+              twsMin: minTws // Chirurgico: Salviamo il vento minimo per poter tracciare la variabilità (Gust Factor)
+            });
 
-    // Pruning: manteniamo in RAM solo le ultime 6 ore (12 slot)
+            // Pruning: manteniamo in RAM solo le ultime 6 ore (12 slot)
     while (windRadarSlots.length > 12) {
       windRadarSlots.shift();
     }
@@ -631,56 +633,58 @@ module.exports = function (app) {
    * fetchOpenMeteoForecast: Recupera le previsioni orarie accoppiate (Seamless) da Open-Meteo.
    * Utilizza il modello integrato /forecast per evitare zone d'ombra in rada, con tempo forzato in UTC.
    */
-  function fetchOpenMeteoForecast(position, current30mSlot) {
-    if (!position || position.latitude === undefined || position.longitude === undefined) return;
-
-    const lat = position.latitude;
-    const lon = position.longitude;
-    
-    // Modello accoppiato Seamless basato su forecast, con vento espresso in nodi e orario in UTC (GMT)
-    const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=wind_speed_10m,wind_direction_10m&wind_speed_unit=kn&timezone=GMT&forecast_days=2`;
-
-    lastForecast30mSlot = current30mSlot; // Aggiorna preventivamente lo slot per evitare chiamate simultanee in caso di rallentamento di rete
-
-    https.get(url, (res) => {
-      if (res.statusCode !== 200) {
-        app.error(`[Open-Meteo] HTTP Error: ${res.statusCode}`);
-        res.resume();
-        lastForecast30mSlot = 0; // Reset in caso di errore per permettere un tentativo al prossimo pacchetto GPS
-        return;
-      }
-
-      let data = '';
-      res.on('data', (chunk) => { data += chunk; });
-      res.on('end', () => {
-        try {
-          const parsed = JSON.parse(data);
-          if (!parsed.hourly || !parsed.hourly.time) {
-            app.error('[Open-Meteo] Invalid API response format');
-            lastForecast30mSlot = 0;
+    function fetchOpenMeteoForecast(position, current30mSlot) {
+        if (!position || position.latitude === undefined || position.longitude === undefined) return;
+
+        const lat = position.latitude;
+        const lon = position.longitude;
+        
+        // Chirurgico: Aggiunto wind_gusts_10m alla chiamata per ottenere l'intensità delle raffiche previste
+        const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=wind_speed_10m,wind_direction_10m,wind_gusts_10m&wind_speed_unit=kn&timezone=GMT&forecast_days=2`;
+
+        lastForecast30mSlot = current30mSlot; // Aggiorna preventivamente lo slot per evitare chiamate simultanee in caso di rallentamento di rete
+
+        https.get(url, (res) => {
+          if (res.statusCode !== 200) {
+            app.error(`[Open-Meteo] HTTP Error: ${res.statusCode}`);
+            res.resume();
+            lastForecast30mSlot = 0; // Reset in caso di errore per permettere un tentativo al prossimo pacchetto GPS
             return;
           }
 
-          const times = parsed.hourly.time;
-          const speeds = parsed.hourly.wind_speed_10m;
-          const directions = parsed.hourly.wind_direction_10m;
-
-          // Costruiamo la serie storica delle previsioni in formato UTC
-          const forecastList = [];
-          for (let i = 0; i < times.length; i++) {
-            // Forziamo il parsing UTC aggiungendo la dicitura 'Z' alla stringa ISO prodotta da Open-Meteo
-            const epoch = Date.parse(times[i] + "Z");
-            if (isNaN(epoch)) continue;
-
-            // Convertiamo la direzione del vento da gradi (0-360) a radianti (0-2PI)
-            const twdRad = (directions[i] * Math.PI) / 180;
+          let data = '';
+          res.on('data', (chunk) => { data += chunk; });
+          res.on('end', () => {
+            try {
+              const parsed = JSON.parse(data);
+              if (!parsed.hourly || !parsed.hourly.time) {
+                app.error('[Open-Meteo] Invalid API response format');
+                lastForecast30mSlot = 0;
+                return;
+              }
 
-            forecastList.push({
-              time: epoch,
-              tws: speeds[i], // Già in nodi grazie ai parametri della chiamata
-              twd: twdRad
-            });
-          }
+              const times = parsed.hourly.time;
+              const speeds = parsed.hourly.wind_speed_10m;
+              const directions = parsed.hourly.wind_direction_10m;
+              const gusts = parsed.hourly.wind_gusts_10m || []; // Chirurgico: Catturiamo le raffiche dal payload JSON
+
+              // Costruiamo la serie storica delle previsioni in formato UTC
+              const forecastList = [];
+              for (let i = 0; i < times.length; i++) {
+                // Forziamo il parsing UTC aggiungendo la dicitura 'Z' alla stringa ISO prodotta da Open-Meteo
+                const epoch = Date.parse(times[i] + "Z");
+                if (isNaN(epoch)) continue;
+
+                // Convertiamo la direzione del vento da gradi (0-360) a radianti (0-2PI)
+                const twdRad = (directions[i] * Math.PI) / 180;
+
+                forecastList.push({
+                  time: epoch,
+                  tws: speeds[i], // Già in nodi grazie ai parametri della chiamata
+                  twd: twdRad,
+                  gust: gusts[i] !== undefined ? gusts[i] : speeds[i] // Chirurgico: Memorizziamo la raffica oraria (con fallback sulla velocità media)
+                });
+              }
 
           // Calcola l'interpolazione per la mezz'ora futura basandosi sullo slot corrente dell'orologio
           calculateInterpolatedFuture(forecastList);
@@ -721,25 +725,29 @@ module.exports = function (app) {
       }
     }
 
-    if (s1 && s2) {
-      const ratio = (targetTime - s1.time) / (s2.time - s1.time);
+  if (s1 && s2) {
+        const ratio = (targetTime - s1.time) / (s2.time - s1.time);
 
-      // 1. Interpolazione Lineare Velocità (TWS)
-      const interpolatedTws = s1.tws + (s2.tws - s1.tws) * ratio;
+        // 1. Interpolazione Lineare Velocità (TWS)
+        const interpolatedTws = s1.tws + (s2.tws - s1.tws) * ratio;
 
-      // 2. Interpolazione Circolare Vettoriale Direzione (TWD) per evitare l'effetto sfasamento a 0/360°
-      const diff = Math.atan2(Math.sin(s2.twd - s1.twd), Math.cos(s2.twd - s1.twd));
-      const interpolatedTwd = (s1.twd + diff * ratio + Math.PI * 2) % (Math.PI * 2);
+        // 2. Interpolazione Circolare Vettoriale Direzione (TWD) per evitare l'effetto sfasamento a 0/360°
+        const diff = Math.atan2(Math.sin(s2.twd - s1.twd), Math.cos(s2.twd - s1.twd));
+        const interpolatedTwd = (s1.twd + diff * ratio + Math.PI * 2) % (Math.PI * 2);
 
-      // Salviamo le previsioni future nel server
-      futureForecast = {
-        timestamp: targetTime,
-        tws: interpolatedTws,
-        twd: interpolatedTwd
-      };
+        // 3. Interpolazione Lineare Raffiche (Gust)
+        const interpolatedGust = s1.gust + (s2.gust - s1.gust) * ratio; // Chirurgico: Calcolo interpolato della raffica futura
+
+        // Salviamo le previsioni future nel server
+        futureForecast = {
+          timestamp: targetTime,
+          tws: interpolatedTws,
+          twd: interpolatedTwd,
+          gust: interpolatedGust // Chirurgico: Aggiunta la raffica nel pacchetto dati della previsione
+        };
 
-      app.debug(`🔮 [Open-Meteo] Target forecast interpolated for ${new Date(targetTime).toLocaleTimeString()}: TWD ${Math.round(interpolatedTwd * 180 / Math.PI)}°, TWS ${interpolatedTws.toFixed(1)} kts`);
-    } else {
+        app.debug(`🔮 [Open-Meteo] Target forecast interpolated for ${new Date(targetTime).toLocaleTimeString()}: TWD ${Math.round(interpolatedTwd * 180 / Math.PI)}°, TWS ${interpolatedTws.toFixed(1)} kts (Gust: ${interpolatedGust.toFixed(1)} kts)`);
+      } else {
       app.error('[Open-Meteo] Forecast matching slots not found for target time');
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailingrotevista/rotevista-dash",
-  "version": "6.2.6",
+  "version": "6.2.8",
   "description": "Wind Dashboard with navigation and course aids",
   "main": "index.js",
   "publishConfig": {

package/radar.html

@@ -350,14 +350,16 @@
                 }
 
                 const historyRes = await fetch(getApiUrl('/rotevista-history'));
-                if (historyRes.ok) {
-                    const data = await historyRes.json();
-                    if (data.windRadarSlots) windRadarSlots = data.windRadarSlots;
-                    if (data.futureForecast) {
-                        futureForecast = data.futureForecast;
-                        document.getElementById('debug-future').innerText = `TWD: ${Math.round(radToDeg(futureForecast.twd))}°, TWS: ${futureForecast.tws.toFixed(1)} kts`;
-                    }
-                    if (data['navigation.position']) {
+                                if (historyRes.ok) {
+                                    const data = await historyRes.json();
+                                    if (data.windRadarSlots) windRadarSlots = data.windRadarSlots;
+                                    if (data.futureForecast) {
+                                        futureForecast = data.futureForecast;
+                                        // Chirurgico: Formattazione testuale avanzata che estrae ed espone le raffiche (gusts) previste
+                                        const gustVal = futureForecast.gust ? futureForecast.gust.toFixed(1) : futureForecast.tws.toFixed(1);
+                                        document.getElementById('debug-future').innerText = `TWD: ${Math.round(radToDeg(futureForecast.twd))}°, TWS: ${futureForecast.tws.toFixed(1)} kts (Gusts: ${gustVal} kts)`;
+                                    }
+                                    if (data['navigation.position']) {
                         const val = data['navigation.position'];
                         document.getElementById('debug-gps').innerText = val.latitude.toFixed(4) + '; ' + val.longitude.toFixed(4);
                     }
@@ -415,21 +417,22 @@
         }
 
         // --- 4. MOTORE DI CALCOLO DELL'ANELLO 1 (Presente Mobile) ---
-        function calculateActive30mRing() {
-            const now = Date.now();
-            const start30m = now - 1800000;
+                function calculateActive30mRing() {
+                    const now = Date.now();
+                    const start30m = now - 1800000;
 
-            const twdRecent = store.twdMinuteBuffer.filter(p => p.time >= start30m);
-            const twsRecent = store.twsMinuteBuffer.filter(p => p.time >= start30m);
+                    const twdRecent = store.twdMinuteBuffer.filter(p => p.time >= start30m);
+                    const twsRecent = store.twsMinuteBuffer.filter(p => p.time >= start30m);
 
-            if (twdRecent.length === 0) return null;
+                    if (twdRecent.length === 0) return null;
 
-            const twsVals = twsRecent.map(p => p.val).filter(v => isFinite(v));
-            const maxTws = twsVals.length > 0 ? Math.max(...twsVals) : 0;
+                    const twsVals = twsRecent.map(p => p.val).filter(v => isFinite(v));
+                    const maxTws = twsVals.length > 0 ? Math.max(...twsVals) : 0;
+                    const minTws = twsVals.length > 0 ? Math.min(...twsVals) : 0; // Chirurgico: Troviamo il vento minimo reale degli ultimi 30 minuti
 
-            if (maxTws < CALM_THRESHOLD_KTS) {
-                return { twsPeak: maxTws, twdMin: 0, twdMax: 360, isCalm: true };
-            }
+                    if (maxTws < CALM_THRESHOLD_KTS) {
+                        return { twsPeak: maxTws, twsMin: minTws, twdMin: 0, twdMax: 360, isCalm: true };
+                    }
 
             let allAngles = [];
             twdRecent.forEach(p => {
@@ -457,15 +460,16 @@
             const maxDiff = Math.max(...finalDiffs);
 
             const finalMinDeg = Math.round(radToDeg((finalAvg + minDiff + Math.PI * 2) % (Math.PI * 2)));
-            const finalMaxDeg = Math.round(radToDeg((finalAvg + maxDiff + Math.PI * 2) % (Math.PI * 2)));
-
-            return {
-                twdMin: finalMinDeg,
-                twdMax: finalMaxDeg,
-                twsPeak: maxTws,
-                isCalm: false
-            };
-        }
+                        const finalMaxDeg = Math.round(radToDeg((finalAvg + maxDiff + Math.PI * 2) % (Math.PI * 2)));
+
+                        return {
+                            twdMin: finalMinDeg,
+                            twdMax: finalMaxDeg,
+                            twsPeak: maxTws,
+                            twsMin: minTws, // Chirurgico: Ritorniamo anche il valore minimo per abilitare la sfumatura sull'Anello 1
+                            isCalm: false
+                        };
+                    }
 
         // --- 5. MOTORE GRAFICO DI DISEGNO ---
         function drawCompassTicks() {
@@ -622,15 +626,16 @@
             const radarDataList = [];
 
             // 1. ANELLO 0 (Centro - Previsione Futura Open-Meteo)
-            if (futureForecast) {
-                const twdDeg = Math.round(radToDeg(futureForecast.twd));
-                radarDataList.push({
-                    twdMin: (twdDeg - 5 + 360) % 360,
-                    twdMax: (twdDeg + 5 + 360) % 360,
-                    twsPeak: futureForecast.tws,
-                    isFuture: true
-                });
-            } else {
+                        if (futureForecast) {
+                            const twdDeg = Math.round(radToDeg(futureForecast.twd));
+                            radarDataList.push({
+                                // Chirurgico: Impostata una finta ampiezza di 40 gradi (+-20°) per rappresentare l'area di incertezza meteo
+                                twdMin: (twdDeg - 20 + 360) % 360,
+                                twdMax: (twdDeg + 20 + 360) % 360,
+                                twsPeak: futureForecast.tws,
+                                isFuture: true
+                            });
+                        } else {
                 radarDataList.push(null);
             }
 
@@ -639,21 +644,23 @@
             radarDataList.push(activeRing);
 
             // 3. ANELLI da 2 a 7 (I 6 slot storici da 30 min passati salvati dal server, pari a 3 ore)
-            for (let i = 1; i <= 6; i++) {
-                const targetTimestamp = current30mSlot - (i * 1800000);
-                const matchedSlot = windRadarSlots.find(s => s.timestamp === targetTimestamp);
-                
-                if (matchedSlot) {
-                    radarDataList.push({
-                        twdMin: Math.round(radToDeg(matchedSlot.twdMin)),
-                        twdMax: Math.round(radToDeg(matchedSlot.twdMax)),
-                        twsPeak: matchedSlot.twsPeak,
-                        isCalm: matchedSlot.twsPeak < CALM_THRESHOLD_KTS
-                    });
-                } else {
-                    radarDataList.push(null);
-                }
-            }
+                        for (let i = 1; i <= 6; i++) {
+                            const targetTimestamp = current30mSlot - (i * 1800000);
+                            const matchedSlot = windRadarSlots.find(s => s.timestamp === targetTimestamp);
+                            
+                            if (matchedSlot) {
+                                radarDataList.push({
+                                    twdMin: Math.round(radToDeg(matchedSlot.twdMin)),
+                                    twdMax: Math.round(radToDeg(matchedSlot.twdMax)),
+                                    twsPeak: matchedSlot.twsPeak,
+                                    // Chirurgico: Estraiamo il minimo storico con protezione di compatibilità se assente
+                                    twsMin: matchedSlot.twsMin !== undefined ? matchedSlot.twsMin : matchedSlot.twsPeak,
+                                    isCalm: matchedSlot.twsPeak < CALM_THRESHOLD_KTS
+                                });
+                            } else {
+                                radarDataList.push(null);
+                            }
+                        }
 
             document.getElementById('debug-rings-count').innerText = radarDataList.filter(p => p !== null).length + "/8";
 
@@ -682,37 +689,69 @@
                 }
 
                 // Caso B: Arco Direzionale
-                const grad = getChordAlignedGradient(gradId, radius, data.twsPeak, data.twdMin, data.twdMax);
-                let strokeColor = '';
-
-                if (grad.type === 'gradient') {
-                    defsContainer.innerHTML += grad.xml;
-                    strokeColor = grad.url;
-                } else {
-                    strokeColor = grad.color;
-                }
-
-                const pathData = describeArc(200, 200, radius, data.twdMin, data.twdMax);
-
-                const borderPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                borderPath.setAttribute("d", pathData);
-                borderPath.setAttribute("fill", "none");
-                borderPath.setAttribute("stroke", "#000000");
-                borderPath.setAttribute("stroke-width", BORDER_STROKE_WIDTH);
-                borderPath.setAttribute("stroke-linecap", "round");
-                borderPath.setAttribute("opacity", opacityValue);
-                if (data.isFuture) borderPath.setAttribute("stroke-dasharray", "10, 6");
-                ringsContainer.appendChild(borderPath);
-
-                const mainPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
-                mainPath.setAttribute("d", pathData);
-                mainPath.setAttribute("fill", "none");
-                mainPath.setAttribute("stroke", strokeColor);
-                mainPath.setAttribute("stroke-width", ARC_STROKE_WIDTH);
-                mainPath.setAttribute("stroke-linecap", "round");
-                mainPath.setAttribute("opacity", opacityValue);
-                if (data.isFuture) mainPath.setAttribute("stroke-dasharray", "10, 6");
-                ringsContainer.appendChild(mainPath);
+                                let strokeColor = '';
+                                
+                                // Chirurgico: Definita la funzione di colorazione universale basata sulle soglie dei Reef di bordo
+                                const getColorForSpeed = (tws) => {
+                                    const R1 = REEF1; const R2 = REEF2; const R3 = REEF3;
+                                    if (tws < R1 * 0.4) return '#ffffff'; // Bianco (Calma)
+                                    if (tws < R1 * 0.75) return '#00C851'; // Verde (Regolare)
+                                    if (tws < R1) return '#ff9800'; // Arancio (1° Reef Alert)
+                                    if (tws < R2) return '#ffaa00'; // Dorato (Transizione)
+                                    if (tws < R2 + (R3 - R2) * 0.5) return '#ff3b30'; // Rosso (2° Reef Alert)
+                                    return '#9c27b0'; // Viola (Storm / Temporale)
+                                };
+
+                                // Chirurgico: Estraiamo i limiti minimi e massimi dell'arco corrente
+                                // Se è la previsione, usiamo il vento medio e le raffiche di Open-Meteo, altrimenti i minimi e i picchi in RAM
+                                const baseTws = data.isFuture && futureForecast ? futureForecast.tws : (data.twsMin !== undefined ? data.twsMin : data.twsPeak);
+                                const peakTws = data.isFuture && futureForecast ? futureForecast.gust : data.twsPeak;
+
+                                const baseColor = getColorForSpeed(baseTws);
+                                const peakColor = getColorForSpeed(peakTws);
+
+                                if (baseColor !== peakColor) {
+                                    // Se c'è variabilità d'intensità (raffica), disegnamo il gradiente termico dinamico lungo l'arco (Min -> Max -> Min)
+                                    const startPt = polarToCartesian(200, 200, radius, data.twdMax);
+                                    const endPt = polarToCartesian(200, 200, radius, data.twdMin);
+                                    
+                                    const xml = `
+                                        <linearGradient id="${gradId}" x1="${startPt.x.toFixed(1)}" y1="${startPt.y.toFixed(1)}" x2="${endPt.x.toFixed(1)}" y2="${endPt.y.toFixed(1)}" gradientUnits="userSpaceOnUse">
+                                            <stop offset="0%" stop-color="${baseColor}" />
+                                            <stop offset="50%" stop-color="${peakColor}" />
+                                            <stop offset="100%" stop-color="${baseColor}" />
+                                        </linearGradient>
+                                    `;
+                                    defsContainer.innerHTML += xml;
+                                    strokeColor = `url(#${gradId})`;
+                                } else {
+                                    // Se il vento è costante (base e picco ricadono nella stessa fascia), usiamo il colore solido puro
+                                    strokeColor = baseColor;
+                                }
+
+                                const pathData = describeArc(200, 200, radius, data.twdMin, data.twdMax);
+
+                                // Chirurgico: Se è l'anello futuro (isFuture), non disegniamo il bordo nero per evitare artefatti "a doppia bolla"
+                                if (!data.isFuture) {
+                                    const borderPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                                    borderPath.setAttribute("d", pathData);
+                                    borderPath.setAttribute("fill", "none");
+                                    borderPath.setAttribute("stroke", "#000000");
+                                    borderPath.setAttribute("stroke-width", BORDER_STROKE_WIDTH);
+                                    borderPath.setAttribute("stroke-linecap", "round");
+                                    borderPath.setAttribute("opacity", opacityValue);
+                                    ringsContainer.appendChild(borderPath);
+                                }
+
+                                const mainPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                                mainPath.setAttribute("d", pathData);
+                                mainPath.setAttribute("fill", "none");
+                                mainPath.setAttribute("stroke", strokeColor);
+                                mainPath.setAttribute("stroke-width", ARC_STROKE_WIDTH);
+                                mainPath.setAttribute("stroke-linecap", "round");
+                                // Chirurgico: Per l'anello futuro, usiamo un'opacità morbida al 50% (0.5) continua (senza tratteggio) per un effetto "glowing" pulitissimo
+                                mainPath.setAttribute("opacity", data.isFuture ? "0.5" : opacityValue);
+                                ringsContainer.appendChild(mainPath);
             });
 
             // Aggiorna il pannello di debug ad ogni ridisegno del radar