Change settings

src/components/CompareChartE.vue

@@ -1,201 +1,152 @@
 <template>
-  <div ref="root" class="w-full" style="height:520px;"></div>
+  <div class="chart-wrap">
+    <v-chart :option="option" autoresize class="h-96 w-full" />
+  </div>
 </template>
 
-<script setup>
-import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
-import * as echarts from 'echarts'
-import { dataService } from '../lib/dataService'
-import {
-  computeStrategyEquity,
-  computeBuyHoldEquity,
-  STRATEGIES,
-  getStrategyColor,
-} from '../lib/strategies'
-
-const props = defineProps({
-  selected: { type: Array, default: () => [] }, // [{agent_name, asset, model?, strategy?, decision_ids?}, ...]
-  visible:  { type: Boolean, default: true },
-  mode:     { type: String,  default: 'usd' },   // 'usd' | 'pct'
-})
-
-const root = ref(null)
-let chart = null
-
-// hard start dates by asset
-const ASSET_CUTOFF = { BTC: '2025-08-01' }
-
-// ------- helpers -------
-const val = (x, d) => (x === undefined || x === null ? d : x)
-
-// 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])
-}
-
-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)
-  )
-}
-
-async function rebuild() {
-  if (!props.visible || !root.value) return
-
-  const all = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-  const group = new Map()
-
-  for (const sel of (props.selected || [])) {
-    const assetCode = sel.asset
-    let seq = pickSeqByIdsOrFallback(all, sel)
-
-    // 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.__d > b.__d ? 1 : -1))
-
-    // NO weekend / holiday filter (per your request)
-
-    // asset cutoff
-    const cutoff = ASSET_CUTOFF[assetCode]
-    if (cutoff) {
-      const t0 = new Date(`${cutoff}T00:00:00Z`).getTime()
-      seq = seq.filter(r => new Date(`${r.__d}T00:00:00Z`).getTime() >= t0)
+<script>
+import { defineComponent } from 'vue'
+import VChart from 'vue-echarts'
+import * as echarts from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TooltipComponent, DataZoomComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+import { getAllDecisions } from '../lib/dataCache'
+import { readAllRawDecisions } from '../lib/idb'
+import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
+import { STRATEGIES } from '../lib/strategies'
+import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
+import { getStrategyColor } from '../lib/chartColors'
+
+echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer])
+
+const ASSET_CUTOFF = {
+  BTC: '2025-08-01',
+  // ETH: '2025-08-15',  // example if you add others later
+};
+
+export default defineComponent({
+  name: 'CompareChartE',
+  components: { VChart },
+  props: {
+    selected: { type: Array, default: () => [] },
+    visible: { type: Boolean, default: true }
+  },
+  data(){ return { option: {} } },
+  watch: {
+    selected: { deep: true, handler(){ this.rebuild() } },
+    visible(v){ if (v) this.$nextTick(() => this.rebuild()) }
+  },
+  mounted(){ this.$nextTick(() => this.rebuild()) },
+  methods: {
+    async getAll(){
+      let all = getAllDecisions() || []
+      if (!all.length) {
+        try { const cached = await readAllRawDecisions(); if (cached?.length) all = cached } catch {}
+      }
+      return all
+    },
+    async rebuild(){
+      if (!this.visible) return
+      const selected = Array.isArray(this.selected) ? this.selected : []
+      const all = await this.getAll()
+      const groupKeyToSeq = new Map()
+
+      // 1) Build sequences exactly like CompareChart.vue
+      for (const sel of selected) {
+        const { agent_name: agent, asset, model } = sel
+        const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
+        let seq = ids.length ? all.filter(r => ids.includes(r.id))
+                             : all.filter(r => r.agent_name === agent && r.asset === asset && r.model === model)
+        seq.sort((a,b) => (a.date > b.date ? 1 : -1))
+        const isCrypto = asset === 'BTC' || asset === 'ETH'
+        let filtered = isCrypto ? seq : await filterRowsToNyseTradingDays(seq)
+
+        // --- asset-specific cutoff ---
+        const cutoff = ASSET_CUTOFF[asset]
+        if (cutoff) {
+          const t0 = new Date(cutoff + 'T00:00:00Z')
+          filtered = filtered.filter(r => new Date(r.date + 'T00:00:00Z') >= t0)
+        }
+        groupKeyToSeq.set(`${agent}|${asset}|${model}`, { sel, seq: filtered })
+      }
+
+      // 2) Build series using (time,value) pairs => no misalignment
+      const series = []
+      const legend = []
+      const assets = new Set()
+      const agentColorIndex = new Map()
+
+      for (const [_, { sel, seq }] of groupKeyToSeq.entries()) {
+        if (!seq.length) continue
+        const agent = sel.agent_name
+        const asset = sel.asset
+        assets.add(asset)
+
+        const idx = agentColorIndex.get(agent) ?? agentColorIndex.size
+        agentColorIndex.set(agent, idx)
+
+        const cfg = (STRATEGIES || []).find(s => s.id === sel.strategy) || { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005, label: 'Selected' }
+        const stratY = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode) || []
+        const points = seq.map((row, i) => [row.date, stratY[i]])  // << key change
+
+        const name = `${agent} · ${sel.model} · ${cfg.label}`
+        legend.push(name)
+        series.push({
+          name,
+          type: 'line',
+          showSymbol: false,
+          smooth: false,
+          emphasis: { focus: 'series' },
+          lineStyle: { width: 2 },
+          areaStyle: { opacity: 0.06 },
+          data: points
+        })
+      }
+
+      // 3) Buy & Hold baseline per asset (also time/value points)
+      for (const asset of assets) {
+        const entry = [...groupKeyToSeq.values()].find(v => v.sel.asset === asset)
+        if (!entry) continue
+        const bhY = computeBuyHoldEquity(entry.seq, 100000) || []
+        const bhPoints = entry.seq.map((row, i) => [row.date, bhY[i]])
+        series.push({
+          name: `${asset} · Buy&Hold`,
+          type: 'line',
+          showSymbol: false,
+          lineStyle: { width: 1.5 },
+          color: getStrategyColor('', true, 0),
+          data: bhPoints
+        })
+        legend.push(`${asset} · Buy&Hold`)
+      }
+
+      this.option = {
+        animation: true,
+        grid: { left: 56, right: 24, top: 16, bottom: 60 },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'line' },
+          valueFormatter: v => typeof v === 'number'
+            ? v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+            : v
+        },
+        legend: { type: 'scroll', bottom: 8, icon: 'roundRect', itemGap: 10, data: legend },
+        xAxis: { type: 'time' },                 // << time axis = auto alignment
+        yAxis: {
+          type: 'value', scale: true,
+          axisLabel: { formatter: v => v.toLocaleString(undefined, {style:'currency', currency:'USD', maximumFractionDigits:0 }) }
+        },
+        dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
+        series
+      }
     }
-
-    group.set(`${sel.agent_name}|${assetCode}|${sel.model ?? ''}`, { sel, seq })
-  }
-
-  // Build series
-  const series = []
-  const assetSet = new Set()
-
-  for (const { sel, seq } of group.values()) {
-    if (!seq.length) continue
-    const assetCode = sel.asset
-    assetSet.add(assetCode)
-
-    const cfg = (STRATEGIES || []).find(s => s.id === sel.strategy)
-      || { 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.__d, val(equity[i], null)])
-    if (props.mode === 'pct') points = toPct(points)
-
-    series.push({
-      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) },
-      data: points,
-    })
-  }
-
-  // Buy & Hold (dashed) per asset
-  for (const sym of assetSet) {
-    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.__d, val(bh[i], null)])
-    if (props.mode === 'pct') points = toPct(points)
-
-    series.push({
-      name: `${sym} · Buy&Hold`,
-      type: 'line',
-      showSymbol: false,
-      lineStyle: { width: 2, type: 'dashed', color: '#7c7c7c' },
-      data: points,
-    })
   }
-
-  // Bold best line
-  if (series.length) {
-    let bestIdx = -1, bestVal = -Infinity
-    series.forEach((s, i) => {
-      if (s.type !== 'line' || s.lineStyle?.type === 'dashed') return
-      const y = s.data?.length ? s.data[s.data.length - 1][1] : -Infinity
-      if (y > bestVal) { bestVal = y; bestIdx = i }
-    })
-    if (bestIdx >= 0) series[bestIdx].lineStyle.width = 3.5
-  }
-
-  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}) } },
-    legend: { show: false },
-    tooltip: { show: false },
-    dataZoom: [
-      { type: 'inside', throttle: 50 },
-      { type: 'slider', height: 14, bottom: 20 },
-    ],
-    series,
-  }
-
-  if (!chart) {
-    chart = echarts.init(root.value, null, { renderer: 'canvas' })
-    window.addEventListener('resize', onResize)
-  }
-  chart.setOption(option, true)
-}
-
-function onResize(){ chart && chart.resize() }
-
-onMounted(() => { rebuild() })
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', onResize)
-  if (chart) { chart.dispose(); chart = null }
 })
-
-watch(() => props.mode, () => rebuild())
-watch(() => props.visible, v => { if (v) rebuild() })
-watch(() => props.selected, () => rebuild(), { deep: true })
 </script>
 
 <style scoped>
-/* container height set inline */
+.chart-wrap { width: 100%; }
+.h-96 { height: 24rem; }
 </style>