Add time window slider with Return and Volatility calculation

src/views/RequestView.vue

@@ -7,10 +7,19 @@
           <span class="ama-gradient">Assets in the Arena</span>
         </h2>
         <p class="section-sub">
-          Live from dataService • B&amp;H sparkline (ECharts LineChart) • 1M change
+          Live from dataService • B&amp;H sparkline (ECharts LineChart) • Return & Volatility
         </p>
       </header>
 
+      <!-- Time Window Slider -->
+      <div class="time-window-control">
+        <div class="time-window-header">
+          <span class="time-window-label">Time Window:</span>
+          <span class="time-window-range">{{ formatDate(dateRange[0]) }} - {{ formatDate(dateRange[1]) }}</span>
+        </div>
+        <Slider v-model="dateRange" :min="0" :max="maxDateIndex" :range="true" class="time-slider" />
+      </div>
+
       <div class="grid grid-assets-4">
         <article v-for="a in assets" :key="a.code" class="card asset-card">
           <div class="asset-head">
@@ -36,6 +45,10 @@
                   {{ signedPct(a.change1m) }}
                 </div>
               </div>
+              <div class="stat">
+                <div class="stat-label">Volatility</div>
+                <div class="stat-value mono">{{ formatPct(a.volatility) }}</div>
+              </div>
               <div class="stat">
                 <div class="stat-label">Runs</div>
                 <div class="stat-value mono">{{ a.runs }}</div>
@@ -165,6 +178,11 @@ export default {
 
       // dynamic from dataService
       assets: [],
+      
+      // time window control
+      allDates: [],
+      dateRange: [0, 0],
+      maxDateIndex: 0,
 
       // agents (no performance fields shown)
       agents: [
@@ -252,6 +270,36 @@ export default {
     fmtUSD(n) {
       return (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
     },
+    formatPct(p) {
+      const v = Number(p || 0) * 100
+      return `${Math.abs(v).toFixed(2)}%`
+    },
+    formatDate(index) {
+      if (!this.allDates || index < 0 || index >= this.allDates.length) return '—'
+      return this.allDates[index]
+    },
+    calculateVolatility(values) {
+      if (!Array.isArray(values) || values.length < 2) return 0
+      
+      // Calculate returns
+      const returns = []
+      for (let i = 1; i < values.length; i++) {
+        if (values[i-1] > 0) {
+          returns.push((values[i] - values[i-1]) / values[i-1])
+        }
+      }
+      
+      if (returns.length === 0) return 0
+      
+      // Calculate mean
+      const mean = returns.reduce((sum, r) => sum + r, 0) / returns.length
+      
+      // Calculate variance
+      const variance = returns.reduce((sum, r) => sum + Math.pow(r - mean, 2), 0) / returns.length
+      
+      // Return standard deviation (volatility)
+      return Math.sqrt(variance)
+    },
 
     /* ===== Dynamic assets built from B&H equity ===== */
     async buildAssetSeq(assetCode) {
@@ -282,10 +330,27 @@ export default {
       console.log('[RequestView] Assets in rows:', assetsInRows)
       if (!assetsInRows.length) { this.assets = []; return }
 
+      // Initialize all dates from first asset to set up slider
+      if (this.allDates.length === 0 && assetsInRows.length > 0) {
+        const firstSeq = await this.buildAssetSeq(assetsInRows[0])
+        if (firstSeq.length > 0) {
+          this.allDates = firstSeq.map(r => r.date).filter(d => d >= '2025-08-01')
+          this.maxDateIndex = this.allDates.length - 1
+          this.dateRange = [0, this.maxDateIndex]
+        }
+      }
+
       const cards = []
       for (const code of assetsInRows) {
-        const seq = await this.buildAssetSeq(code)
-        console.log('[RequestView] Asset', code, 'seq length:', seq?.length || 0)
+        const fullSeq = await this.buildAssetSeq(code)
+        console.log('[RequestView] Asset', code, 'full seq length:', fullSeq?.length || 0)
+        if (!fullSeq.length) continue
+
+        // Filter sequence based on date range
+        const startDate = this.allDates[this.dateRange[0]] || '2025-08-01'
+        const endDate = this.allDates[this.dateRange[1]] || this.allDates[this.allDates.length - 1]
+        const seq = fullSeq.filter(r => r.date >= startDate && r.date <= endDate)
+        console.log('[RequestView] Asset', code, 'filtered seq length:', seq?.length || 0, 'from', startDate, 'to', endDate)
         if (!seq.length) continue
 
         // B&H equity as normalized series for spark and change
@@ -302,6 +367,9 @@ export default {
         const spark = this.sampleSeries(bh.map(v => v), 12)
         console.log('[RequestView] Asset', code, 'spark data:', spark)
         const change1m = this.pctChange(spark[0], spark[spark.length - 1])
+        
+        // Calculate volatility
+        const volatility = this.calculateVolatility(bh)
 
         // trading day span
         let days = 0
@@ -323,6 +391,7 @@ export default {
           month: spark,
           sparkColor: (code === 'BTC') ? '#f59e0b' : (code === 'ETH' ? '#6366f1' : '#22c55e'),
           change1m,
+          volatility,
           runs, agents, days,
           eod: lastDate
         })
@@ -333,6 +402,13 @@ export default {
       cards.sort((a,b) => (order.indexOf(a.code) - order.indexOf(b.code)))
       this.assets = cards
     }
+  },
+  
+  watch: {
+    dateRange() {
+      // Rebuild assets when date range changes
+      this.rebuildAssets().catch(() => {})
+    }
   }
 }
 </script>
@@ -354,6 +430,13 @@ export default {
 .clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 .w-full{ width:100%; }
 
+/* ===== Time Window Control ===== */
+.time-window-control{ margin:12px 0 16px; padding:16px; background:#F6F8FB; border:1px solid #E7ECF3; border-radius:12px; }
+.time-window-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
+.time-window-label{ font-weight:700; font-size:14px; color:#0f172a; }
+.time-window-range{ font-size:13px; color:#64748b; font-family: ui-monospace, monospace; }
+.time-slider{ margin-top:8px; }
+
 /* ===== Sections ===== */
 .section{ margin-top:18px; }
 .section-head{ margin-bottom:8px; }
@@ -394,7 +477,7 @@ export default {
 
 .asset-body{ display:flex; flex-direction:column; gap:10px; }
 .spark-wrap{ width:100%; height:90px; overflow:hidden; border-radius:8px; background:#F6F8FB; border:1px solid #E7ECF3; position:relative; }
-.asset-stats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; }
+.asset-stats{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; }
 .stat{ background:#F6F8FB; border:1px solid #E7ECF3; border-radius:8px; padding:4px 6px; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
 .stat-label{ font-size:9px; color:#6b7280; margin-bottom:2px; white-space:nowrap; }
 .stat-value{ font-weight:700; font-size:11.5px; color:#0f172a; line-height:1.2; }