Update index.html

index.html

@@ -424,11 +424,35 @@ document.getElementById('theme-toggle').addEventListener('click', e=>{
   if(cumChart) generate();
   if(detailChart) loadDetailChart(region);
   if(monthlyLoadedRegion) loadMonthlyClimate(region);
+  if(window.parent !== window) window.parent.postMessage({type:'dashTheme', theme: currentTheme}, '*');
 });
 document.getElementById('lang-toggle').addEventListener('click', e=>{
   const btn = e.target.closest('.toggle-btn'); if(!btn) return;
   currentLang = btn.dataset.lang;
   applyI18n();
+  if(window.parent !== window) window.parent.postMessage({type:'dashLang', lang: currentLang}, '*');
+});
+
+/* ---- respond to lang/theme commands from a hosting portal page (if embedded in an iframe) ---- */
+window.addEventListener('message', ev=>{
+  const msg = ev.data || {};
+  if(msg.type === 'setLang' && msg.lang && I18N[msg.lang] && msg.lang !== currentLang){
+    currentLang = msg.lang;
+    applyI18n();
+  }
+  if(msg.type === 'setTheme' && msg.theme){
+    // the portal supports 3 themes (navy/sky/light); this page only has light/dark — anything but "light" maps to dark
+    const mapped = msg.theme === 'light' ? 'light' : 'dark';
+    if(mapped !== currentTheme){
+      currentTheme = mapped;
+      document.documentElement.setAttribute('data-theme', currentTheme);
+      document.querySelectorAll('#theme-toggle .toggle-btn').forEach(b=>b.classList.toggle('active', b.dataset.themeVal===currentTheme));
+      const region = document.getElementById('sel-region').value;
+      if(cumChart) generate();
+      if(detailChart) loadDetailChart(region);
+      if(monthlyLoadedRegion) loadMonthlyClimate(region);
+    }
+  }
 });
 
 /* ============================= CHART THEME COLORS ============================= */
@@ -743,11 +767,22 @@ async function fetchRecent30(region){
 }
 function dayOfYearOf(d){ const start=new Date(d.getFullYear(),0,1); let doy=Math.floor((d-start)/86400000)+1; return doy>365?365:doy; }
 function computeNormalForDates(byYear, dates, excludeYear){
+  // Uses the same method as the cumulative chart: for each reference year, sum precip over the
+  // matching calendar-day window, then take the MEDIAN of those yearly totals — not a day-by-day
+  // average, which uses a different statistic (mean) and can silently disagree in sign with the
+  // cumulative chart on skewed rainfall distributions.
   const years = Object.keys(byYear).map(Number).filter(y=>y!==excludeYear);
-  return dates.map(d=>{
-    const doy = dayOfYearOf(d);
-    const vals = years.map(y=>byYear[y].precip[doy-1]).filter(v=>v!=null);
-    return vals.length ? vals.reduce((a,b)=>a+b,0)/vals.length : 0;
+  const doys = dates.map(d=>dayOfYearOf(d));
+  return doys.map((_, i)=>{
+    const yearlyTotals = years.map(y=>{
+      let total = 0;
+      for(let k=0;k<=i;k++){
+        const v = byYear[y].precip[doys[k]-1];
+        total += (v||0);
+      }
+      return total;
+    });
+    return percentile(yearlyTotals, 50) || 0;
   });
 }
 async function buildRain30(region){
@@ -760,10 +795,9 @@ async function buildRain30(region){
     const times = recent.time.slice(0,-1);
     const precs = recent.precipitation_sum.slice(0,-1).map(v=>v==null?0:v);
     const dates = times.map(s=>new Date(s+'T00:00:00'));
-    const normalsDaily = computeNormalForDates(byYear, dates, new Date().getFullYear());
-    let accA=0, accN=0;
+    const normalCum = computeNormalForDates(byYear, dates, new Date().getFullYear());
+    let accA=0;
     const actualCum = precs.map(v=>{ accA+=v; return accA; });
-    const normalCum = normalsDaily.map(v=>{ accN+=v; return accN; });
     const above = actualCum.map((v,i)=>Math.max(v, normalCum[i]));
     const below = actualCum.map((v,i)=>Math.min(v, normalCum[i]));
     const months = MONTHS[currentLang];
@@ -1071,4 +1105,4 @@ applyI18n();
 })();
 </script>
 </body>
-</html>
+</html>