Change settings

package-lock.json

@@ -17,6 +17,7 @@
         "@supabase/supabase-js": "^2.45.4",
         "chart.js": "^4.5.1",
         "chartjs-plugin-zoom": "^2.2.0",
+        "echarts": "^6.0.0",
         "emailjs-com": "^3.2.0",
         "hammerjs": "^2.0.8",
         "install": "^0.13.0",
@@ -26,6 +27,7 @@
         "primeicons": "^7.0.0",
         "primevue": "^4.1.0",
         "vue": "^3.4.38",
+        "vue-echarts": "^8.0.1",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -484,7 +486,6 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
       "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "7.1.0"
       },
@@ -1175,7 +1176,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -1208,6 +1208,15 @@
       "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
     "node_modules/emailjs-com": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
@@ -3530,7 +3539,6 @@
       "version": "4.0.3",
       "inBundle": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3872,6 +3880,11 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "license": "MIT"
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/undici-types": {
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
@@ -3884,7 +3897,6 @@
       "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -3944,7 +3956,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
       "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.22",
         "@vue/compiler-sfc": "3.5.22",
@@ -3961,6 +3972,15 @@
         }
       }
     },
+    "node_modules/vue-echarts": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-8.0.1.tgz",
+      "integrity": "sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==",
+      "peerDependencies": {
+        "echarts": "^6.0.0",
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
@@ -4012,6 +4032,14 @@
           "optional": true
         }
       }
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

package.json

@@ -18,6 +18,7 @@
     "@supabase/supabase-js": "^2.45.4",
     "chart.js": "^4.5.1",
     "chartjs-plugin-zoom": "^2.2.0",
+    "echarts": "^6.0.0",
     "emailjs-com": "^3.2.0",
     "hammerjs": "^2.0.8",
     "install": "^0.13.0",
@@ -27,6 +28,7 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.1.0",
     "vue": "^3.4.38",
+    "vue-echarts": "^8.0.1",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {

src/components/CompareChartE.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="chart-wrap">
+    <v-chart :option="option" autoresize class="h-96 w-full" />
+  </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'
+
+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])
+
+export default defineComponent({
+  name: 'CompareChartE',
+  components: { VChart },
+  props: {
+    selected: { type: Array, default: () => [] },   // [{agent_name, asset, model, strategy, decision_ids?}]
+    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()
+
+      // Build grouped sequences from selected (borrowed from 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'
+        const filtered = isCrypto ? seq : await filterRowsToNyseTradingDays(seq)
+        groupKeyToSeq.set(`${agent}|${asset}|${model}`, { sel, seq: filtered })
+      }
+
+      const keys = Array.from(groupKeyToSeq.keys())
+      const labels = keys.length ? (groupKeyToSeq.get(keys[0]).seq || []).map(s => s.date) : []
+
+      // Build ECharts series: strategy lines per selection + asset Buy&Hold once
+      const series = []
+      const legend = []
+      const assets = new Set()
+
+      // Per-agent color hue: reuse your getStrategyColor hue system
+      const agentColorIndex = new Map()
+
+      for (const [gk, { 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)
+
+        // strategy config
+        const cfg = (STRATEGIES || []).find(s => s.id === sel.strategy) || { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005, label: 'Selected' }
+        const stratSeries = computeStrategyEquity(seq, 100000, cfg.fee, cfg.strategy, cfg.tradingMode)
+        if (stratSeries?.length) {
+          const color = getStrategyColor(sel.strategy || 'aggressive_lo', false, idx)
+          const vals = labels.length ? stratSeries.slice(0, labels.length) : stratSeries
+          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 },
+            data: vals
+          })
+        }
+      }
+
+      // Add Buy&Hold baseline once per asset (in black)
+      for (const asset of assets) {
+        // find any seq for this asset to build BH labels
+        const entry = [...groupKeyToSeq.values()].find(v => v.sel.asset === asset)
+        if (!entry) continue
+        const bh = computeBuyHoldEquity(entry.seq, 100000) || []
+        const baseline = labels.length ? bh.slice(0, labels.length) : bh
+        series.push({
+          name: `${asset} · Buy&Hold`,
+          type: 'line',
+          showSymbol: false,
+          lineStyle: { width: 1.5 },
+          color: getStrategyColor('', true, 0),
+          data: baseline
+        })
+        legend.push(`${asset} · Buy&Hold`)
+      }
+
+      this.option = {
+        animation: true,
+        grid: { left: 40, right: 20, top: 30, bottom: 40 },
+        tooltip: {
+          trigger: 'axis',
+          valueFormatter: v => typeof v === 'number'
+            ? v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+            : v
+        },
+        legend: { type: 'scroll', bottom: 0, data: legend },
+        xAxis: {
+          type: 'category',
+          data: labels,
+          axisLabel: { formatter: v => v?.slice?.(2) } // compact YY-MM-DD
+        },
+        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: 16, bottom: 22 }
+        ],
+        series
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+.chart-wrap { width: 100%; }
+.h-96 { height: 24rem; }
+</style>

src/views/LiveView.vue

@@ -1,18 +1,74 @@
+<!-- src/views/LiveView.vue -->
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import CompareChartE from '@/components/CompareChartE.vue'
+import { dataService } from '@/lib/dataService'
+
+const ASSETS = ['BTC','ETH','SOL','BNB','DOGE','XRP']
+const asset = ref(ASSETS[0])
+const agents = ref([])
+let unsub = null
+
+function score(row){ return typeof row.balance === 'number' ? row.balance : -Infinity }
+
+const winners = computed(() => {
+  const rows = (agents.value || []).filter(r => r.asset === asset.value)
+  const byAgent = new Map()
+  for (const r of rows) {
+    const k = r.agent_name
+    const cur = byAgent.get(k)
+    if (!cur || score(r) > score(cur)) byAgent.set(k, r)
+  }
+  return [...byAgent.values()]
+})
+
+const winnersForChart = computed(() =>
+  winners.value.map(w => ({
+    agent_name: w.agent_name,
+    asset:      w.asset,
+    model:      w.model,
+    strategy:   w.strategy,
+    decision_ids: Array.isArray(w.decision_ids) ? w.decision_ids : undefined
+  }))
+)
+
+const winnersSorted = computed(() => [...winners.value].sort((a,b) => score(b) - score(a)))
+
+const fmtUSD = n => (n ?? 0).toLocaleString(undefined,{ style:'currency', currency:'USD', maximumFractionDigits:2 })
+
+onMounted(async () => {
+  unsub = dataService.subscribe((snap) => { agents.value = snap.agents || [] })
+  if (!dataService.loaded && !dataService.loading) { try { await dataService.load(false) } catch {} }
+})
+onBeforeUnmount(() => unsub && unsub())
+</script>
+
 <template>
-    <div>
-        <h1>Live</h1>
+  <div class="p-4 space-y-4">
+    <div class="flex gap-2 flex-wrap">
+      <button
+        v-for="a in ASSETS" :key="a"
+        class="px-3 py-1 rounded-full border"
+        :class="a===asset ? 'bg-black text-white' : 'bg-white'"
+        @click="asset=a"
+      >{{ a }}</button>
     </div>
-</template>
 
-<script>
-export default {
-    name: 'LiveView'
-}
-</script>
+    <CompareChartE :selected="winnersForChart" :visible="true" />
 
-<style scoped>
-.live-container {
-    width: 100%;
-    height: 100%;
-}
-</style>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
+      <div v-for="row in winnersSorted" :key="row.agent_name+'|'+row.asset+'|'+row.model" class="p-3 rounded-xl border flex justify-between items-center">
+        <div>
+          <div class="font-semibold">{{ row.agent_name }}</div>
+          <div class="text-xs opacity-70">{{ row.model }}</div>
+        </div>
+        <div class="text-right">
+          <div class="font-bold text-lg">{{ fmtUSD(row.balance) }}</div>
+          <div class="text-xs opacity-70">
+            EOD {{ (row.end_date || row.last_nav_ts) ? new Date(row.end_date || row.last_nav_ts).toLocaleDateString() : '-' }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>