From 376e85521792e8fda419efaaf1919e1f8626727e Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Wed, 1 Apr 2026 07:54:14 -0500
Subject: [PATCH] Show 'Best at X UTC' with peak score on forecast graph

---
 assets/js/propagation_map_hook.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js
index 2b9bec4c..cd619f53 100644
--- a/assets/js/propagation_map_hook.js
+++ b/assets/js/propagation_map_hook.js
@@ -151,6 +151,11 @@ function buildForecastSvg(forecast) {
   else if (diff < -5) trend = `<span style="color:#ff4f4f;">&#9660; Declining</span>`
   else trend = `<span style="color:#ffe566;">&#8594; Steady</span>`
 
+  // Best time
+  const bestPt = points.reduce((best, p) => p.score > best.score ? p : best, points[0])
+  const bestUtc = `${bestPt.time.getUTCHours().toString().padStart(2, "0")}:00 UTC`
+  const bestTier = scoreTier(bestPt.score)
+
   // Y-axis: score labels
   const yLabels = [0, 50, 100].map(s => {
     const y = marginT + plotH * (1 - s / 100)
@@ -177,7 +182,10 @@ function buildForecastSvg(forecast) {
         ${xLabels}
         <polyline points="${polyline}" fill="none" stroke="#00ffa3" stroke-width="2" stroke-linejoin="round"/>
         <circle cx="${nowPt.x}" cy="${nowPt.y}" r="3" fill="#fff" stroke="#00ffa3" stroke-width="1.5"/>
+        <circle cx="${bestPt.x}" cy="${bestPt.y}" r="3" fill="${bestTier.color}" stroke="#fff" stroke-width="1"/>
+        <text x="${bestPt.x}" y="${bestPt.y - 6}" font-size="8" fill="${bestTier.color}" text-anchor="middle" font-weight="700">${bestPt.score}</text>
       </svg>
+      <div style="font-size:11px;margin-top:3px;color:${bestTier.color};">Best at ${bestUtc} &mdash; score ${bestPt.score} (${bestTier.label})</div>
     </div>`
 }