added rally-cycles

index.html

@@ -45,6 +45,11 @@ h1 { text-align: center; margin-bottom: 8px; font-size: 1.6rem; color: #fff; }
 <h1>Monthly Market Returns by Index</h1>
 <p class="subtitle">S&P 500, NASDAQ, Dow Jones, Russell 2000</p>
 
+<div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 16px;">
+  <a href="cumulative.html" style="color: #5b8def; text-decoration: none; font-size: 0.82rem;">Drawdowns from ATH &rarr;</a>
+  <a href="alltime-lows.html" style="color: #7ed321; text-decoration: none; font-size: 0.82rem;">Gains from ATL &rarr;</a>
+</div>
+
 <div class="controls">
   <div class="control-group">
     <label>From:</label>
@@ -74,12 +79,19 @@ h1 { text-align: center; margin-bottom: 8px; font-size: 1.6rem; color: #fff; }
 <script src="data/marketdata.js"></script>
 <script>
 const DATA = {};
+const CLOSES = {};
 for (const idx of Object.keys(RAW)) {
-  DATA[idx] = RAW[idx].map(([y, m, r]) => ({
+  const sorted = [...RAW[idx]].sort((a, b) => a[0] * 100 + a[1] - (b[0] * 100 + b[1]));
+  CLOSES[idx] = sorted.map(([y, m, price]) => ({
     x: new Date(y, m - 1, 1),
-    y: r,
+    price,
     year: y
   }));
+  DATA[idx] = sorted.map(([y, m, price], i) => {
+    const prev = i > 0 ? sorted[i - 1][2] : price;
+    const monthlyReturn = ((price - prev) / prev) * 100;
+    return { x: new Date(y, m - 1, 1), y: monthlyReturn, year: y };
+  });
 }
 
 const COLORS = {