Change settings

src/components/CompareChartE.vue

@@ -5,8 +5,6 @@
 <script setup>
 import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import * as echarts from 'echarts'
-
-// ⬇️ adjust these imports to match your project structure if needed
 import { dataService } from '../lib/dataService'
 import {
   computeStrategyEquity,
@@ -15,79 +13,95 @@ import {
   getStrategyColor,
 } from '../lib/strategies'
 
-
-function isNyseTradingDay(dateStr) {
-  const d = new Date(`${dateStr}T00:00:00Z`)
-  const day = d.getUTCDay() // 0=Sun, 6=Sat
-  return day !== 0 && day !== 6
-}
-async function filterRowsToNyseTradingDays(seq) {
-  return Array.isArray(seq) ? seq.filter(r => isNyseTradingDay(r.date)) : []
-}
-
-// ---------- props ----------
 const props = defineProps({
-  selected: { type: Array, default: () => [] }, // [{agent_name, asset, model, strategy, decision_ids?}, ...]
+  selected: { type: Array, default: () => [] }, // [{agent_name, asset, model?, strategy?, decision_ids?}, ...]
   visible:  { type: Boolean, default: true },
   mode:     { type: String,  default: 'usd' },   // 'usd' | 'pct'
 })
 
-// ---------- refs ----------
 const root = ref(null)
 let chart = null
 
-// ---------- constants ----------
-const ASSET_CUTOFF = {
-  BTC: '2025-08-01', // ignore earlier data
-}
+// hard start dates by asset
+const ASSET_CUTOFF = { BTC: '2025-08-01' }
 
-// ---------- helpers ----------
+// ------- helpers -------
 const val = (x, d) => (x === undefined || x === null ? d : x)
 
-function toPct(points) {
+// normalize date -> 'YYYY-MM-DD' for ECharts time axis
+function normalizeDateStr(r) {
+  // string dates first
+  const s = r.date ?? r.day ?? (typeof r.ts === 'string' ? r.ts : (typeof r.timestamp === 'string' ? r.timestamp : null))
+  if (typeof s === 'string') {
+    if (s.length >= 10) return s.slice(0, 10) // YYYY-MM-DD
+  }
+  // epoch millis/seconds
+  const t = typeof r.ts === 'number' ? r.ts : (typeof r.timestamp === 'number' ? r.timestamp : null)
+  if (typeof t === 'number') {
+    const ms = t > 1e12 ? t : t * 1000
+    return new Date(ms).toISOString().slice(0, 10)
+  }
+  return undefined
+}
+
+function toPct(points){
   if (!points?.length) return points
   const y0 = points[0][1]
   if (!Number.isFinite(y0) || y0 === 0) return points
   return points.map(([t, y]) => [t, ((y / y0) - 1) * 100])
 }
 
-async function getAllRows() {
-  // rely on dataService already loaded by the view
-  const rows = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-  return rows.map(r => ({ ...r })) // shallow copy
+function sameModel(r, model) {
+  if (!model) return true
+  return (
+    r.model === model ||
+    r.model_name === model ||
+    r.base_model === model ||
+    r.modelId === model
+  )
+}
+
+function pickSeqByIdsOrFallback(all, sel) {
+  const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
+  const byIds = ids.length ? all.filter(r => ids.includes(r.id)) : []
+  if (byIds.length) return byIds
+
+  // fallback: agent + asset (+model if present)
+  return all.filter(r =>
+    r.agent_name === sel.agent_name &&
+    r.asset === sel.asset &&
+    sameModel(r, sel.model)
+  )
 }
 
-// ---------- core build ----------
 async function rebuild() {
   if (!props.visible || !root.value) return
 
-  const all = await getAllRows()
-  const group = new Map() // key -> { sel, seq }
+  const all = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+  const group = new Map()
 
-  // Collect sequences per requested selection
   for (const sel of (props.selected || [])) {
-    const { agent_name: agent, asset: assetCode, model } = sel
-    const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
+    const assetCode = sel.asset
+    let seq = pickSeqByIdsOrFallback(all, sel)
 
-    let seq = ids.length
-      ? all.filter(r => ids.includes(r.id))
-      : all.filter(r => r.agent_name === agent && r.asset === assetCode && r.model === model)
+    // map/normalize dates + drop rows with no date
+    seq = seq
+      .map(r => ({ ...r, __d: normalizeDateStr(r) }))
+      .filter(r => !!r.__d)
 
     // sort by date
-    seq.sort((a, b) => (a.date > b.date ? 1 : -1))
+    seq.sort((a, b) => (a.__d > b.__d ? 1 : -1))
 
-    // trading-day filter for equities; crypto untouched
-    const isCrypto = assetCode === 'BTC' || assetCode === 'ETH' || assetCode === 'SOL' || assetCode === 'BNB' || assetCode === 'DOGE' || assetCode === 'XRP'
-    let filtered = isCrypto ? seq : await filterRowsToNyseTradingDays(seq)
+    // NO weekend / holiday filter (per your request)
 
-    // asset cutoff (e.g., BTC from 2025-08-01)
+    // asset cutoff
     const cutoff = ASSET_CUTOFF[assetCode]
     if (cutoff) {
-      const t0 = new Date(`${cutoff}T00:00:00Z`)
-      filtered = filtered.filter(r => new Date(`${r.date}T00:00:00Z`) >= t0)
+      const t0 = new Date(`${cutoff}T00:00:00Z`).getTime()
+      seq = seq.filter(r => new Date(`${r.__d}T00:00:00Z`).getTime() >= t0)
     }
 
-    group.set(`${agent}|${assetCode}|${model}`, { sel, seq: filtered })
+    group.set(`${sel.agent_name}|${assetCode}|${sel.model ?? ''}`, { sel, seq })
   }
 
   // Build series
@@ -103,26 +117,25 @@ async function rebuild() {
       || { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005, label: 'Selected' }
 
     const equity = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
-    let points = seq.map((row, i) => [row.date, val(equity[i], null)])
+    let points = seq.map((row, i) => [row.__d, val(equity[i], null)])
     if (props.mode === 'pct') points = toPct(points)
 
     series.push({
-      name: `${sel.agent_name} · ${sel.model} · ${cfg.label}`,
+      name: `${sel.agent_name} · ${sel.model ?? ''} · ${cfg.label}`,
       type: 'line',
       showSymbol: false,
       smooth: false,
       lineStyle: { width: 2, color: getStrategyColor(sel.strategy || 'aggressive_lo', false, 0) },
-      // no areaStyle
       data: points,
     })
   }
 
-  // Add Buy&Hold (dashed) per asset
+  // Buy & Hold (dashed) per asset
   for (const sym of assetSet) {
-    const entry = [...group.values()].find(v => v.sel.asset === sym)
-    if (!entry || !entry.seq.length) continue
+    const entry = [...group.values()].find(v => v.sel.asset === sym && v.seq.length)
+    if (!entry) continue
     const bh = computeBuyHoldEquity(entry.seq, 100000) || []
-    let points = entry.seq.map((row, i) => [row.date, val(bh[i], null)])
+    let points = entry.seq.map((row, i) => [row.__d, val(bh[i], null)])
     if (props.mode === 'pct') points = toPct(points)
 
     series.push({
@@ -134,7 +147,7 @@ async function rebuild() {
     })
   }
 
-  // Bold best line (highest last Y)
+  // Bold best line
   if (series.length) {
     let bestIdx = -1, bestVal = -Infinity
     series.forEach((s, i) => {
@@ -145,26 +158,17 @@ async function rebuild() {
     if (bestIdx >= 0) series[bestIdx].lineStyle.width = 3.5
   }
 
-  // Compose option
   const option = {
     animation: true,
     grid: { left: 56, right: 24, top: 12, bottom: 48 },
     xAxis: { type: 'time', axisLabel: { hideOverlap: true } },
     yAxis: props.mode === 'pct'
-      ? {
-          type: 'value', scale: true,
-          axisLabel: { formatter: v => `${Number(v).toLocaleString(undefined, { maximumFractionDigits: 0 })}%` }
-        }
-      : {
-          type: 'value', scale: true,
-          axisLabel: {
-            formatter: v => Number(v).toLocaleString(undefined, {
-              style: 'currency', currency: 'USD', maximumFractionDigits: 0
-            })
-          }
-        },
+      ? { type: 'value', scale: true,
+          axisLabel: { formatter: v => `${Number(v).toLocaleString(undefined,{maximumFractionDigits:0})}%` } }
+      : { type: 'value', scale: true,
+          axisLabel: { formatter: v => Number(v).toLocaleString(undefined,{style:'currency',currency:'USD',maximumFractionDigits:0}) } },
     legend: { show: false },
-    tooltip: { show: false }, // disabled
+    tooltip: { show: false },
     dataZoom: [
       { type: 'inside', throttle: 50 },
       { type: 'slider', height: 14, bottom: 20 },
@@ -172,34 +176,26 @@ async function rebuild() {
     series,
   }
 
-  // init / set
   if (!chart) {
     chart = echarts.init(root.value, null, { renderer: 'canvas' })
-    window.addEventListener('resize', handleResize)
+    window.addEventListener('resize', onResize)
   }
   chart.setOption(option, true)
 }
 
-function handleResize() {
-  if (chart) chart.resize()
-}
+function onResize(){ chart && chart.resize() }
 
-// ---------- lifecycle ----------
 onMounted(() => { rebuild() })
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
-  if (chart) {
-    chart.dispose()
-    chart = null
-  }
+  window.removeEventListener('resize', onResize)
+  if (chart) { chart.dispose(); chart = null }
 })
 
-// Rebuild when inputs change
 watch(() => props.mode, () => rebuild())
 watch(() => props.visible, v => { if (v) rebuild() })
 watch(() => props.selected, () => rebuild(), { deep: true })
 </script>
 
 <style scoped>
-/* no extra styles needed; container height set inline */
+/* container height set inline */
 </style>