Change settings

src/components/CompareChartE.vue

@@ -1,152 +1,195 @@
 <template>
-  <div class="chart-wrap">
-    <v-chart :option="option" autoresize class="h-96 w-full" />
-  </div>
+  <div ref="root" class="w-full" style="height:520px;"></div>
 </template>
 
-<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'
+<script setup>
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import * as echarts from 'echarts'
 
-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'
+// ⬇️ adjust these imports to match your project structure if needed
+import { dataService, filterRowsToNyseTradingDays } from '../lib/dataService'
+import {
+  computeStrategyEquity,
+  computeBuyHoldEquity,
+  STRATEGIES,
+  getStrategyColor,
+} from '../lib/strategies'
 
-echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, DataZoomComponent, CanvasRenderer])
+// ---------- props ----------
+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'
+})
+
+// ---------- refs ----------
+const root = ref(null)
+let chart = null
 
+// ---------- constants ----------
 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)
+  BTC: '2025-08-01', // ignore earlier data
+}
+
+// ---------- helpers ----------
+const val = (x, d) => (x === undefined || x === null ? d : x)
+
+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
+}
+
+// ---------- core build ----------
+async function rebuild() {
+  if (!props.visible || !root.value) return
+
+  const all = await getAllRows()
+  const group = new Map() // key -> { sel, seq }
+
+  // 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 : []
+
+    let seq = ids.length
+      ? all.filter(r => ids.includes(r.id))
+      : all.filter(r => r.agent_name === agent && r.asset === assetCode && r.model === model)
+
+    // sort by date
+    seq.sort((a, b) => (a.date > b.date ? 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)
+
+    // asset cutoff (e.g., BTC from 2025-08-01)
+    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)
+    }
+
+    group.set(`${agent}|${assetCode}|${model}`, { sel, seq: filtered })
+  }
+
+  // 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.date, 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) },
+      // no areaStyle
+      data: points,
+    })
+  }
+
+  // Add 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 bh = computeBuyHoldEquity(entry.seq, 100000) || []
+    let points = entry.seq.map((row, i) => [row.date, 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 (highest last Y)
+  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
+  }
+
+  // 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 })}%` }
         }
-        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 }) }
+          axisLabel: {
+            formatter: v => Number(v).toLocaleString(undefined, {
+              style: 'currency', currency: 'USD', maximumFractionDigits: 0
+            })
+          }
         },
-        dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
-        series
-      }
-    }
+    legend: { show: false },
+    tooltip: { show: false }, // disabled
+    dataZoom: [
+      { type: 'inside', throttle: 50 },
+      { type: 'slider', height: 14, bottom: 20 },
+    ],
+    series,
+  }
+
+  // init / set
+  if (!chart) {
+    chart = echarts.init(root.value, null, { renderer: 'canvas' })
+    window.addEventListener('resize', handleResize)
+  }
+  chart.setOption(option, true)
+}
+
+function handleResize() {
+  if (chart) chart.resize()
+}
+
+// ---------- lifecycle ----------
+onMounted(() => { rebuild() })
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  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>
-.chart-wrap { width: 100%; }
-.h-96 { height: 24rem; }
+/* no extra styles needed; container height set inline */
 </style>