Change settings

src/components/AssetTabs.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex gap-2 flex-wrap">
+    <button
+      v-for="a in orderedAssets" :key="a"
+      class="px-3 py-1 rounded-full border flex items-center gap-2"
+      :class="a===modelValue ? 'bg-black text-white' : 'bg-white'"
+      @click="$emit('update:modelValue', a)"
+    >
+      <img v-if="logos[a]" :src="logos[a]" alt="" class="h-4 w-4 object-contain" />
+      <span>{{ a }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { dataService } from '@/lib/dataService'
+
+// import the logos you actually have in /src/assets (add/remove as needed)
+import AAPL from '@/assets/AAPL.png'
+import MSFT from '@/assets/MSFT.png'
+import BTC  from '@/assets/BTC.png'
+import ETH  from '@/assets/ETH.png'
+import BMRN from '@/assets/BMRN.png'
+import MRNA from '@/assets/MRNA.png'
+import TSLA from '@/assets/TSLA.png'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  preferredOrder: { type: Array, default: () => ['BTC','ETH','SOL','BNB','DOGE','XRP','AAPL','MSFT','BMRN','MRNA','TSLA'] }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const logos = {
+  AAPL, MSFT, BTC, ETH, BMRN, MRNA, TSLA
+}
+
+const availableAssets = computed(() => {
+  const rows = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+  return [...new Set(rows.map(r => r.asset))]  // only assets you actually have
+})
+
+const orderedAssets = computed(() => {
+  const present = new Set(availableAssets.value)
+  const primary = props.preferredOrder.filter(a => present.has(a))
+  const extras  = [...present].filter(a => !props.preferredOrder.includes(a)).sort()
+  const list = [...primary, ...extras]
+  // keep current selection if possible, else default to first
+  if (!list.includes(props.modelValue) && list.length) emit('update:modelValue', list[0])
+  return list
+})
+</script>

src/components/CompareChartE.vue

@@ -48,6 +48,7 @@ export default defineComponent({
       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 : []
@@ -59,9 +60,7 @@ export default defineComponent({
         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) : []
-
+      // 2) Build series using (time,value) pairs => no misalignment
       const series = []
       const legend = []
       const assets = new Set()
@@ -77,57 +76,57 @@ export default defineComponent({
         agentColorIndex.set(agent, idx)
 
         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
-          })
-        }
+        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 bh = computeBuyHoldEquity(entry.seq, 100000) || []
-        const baseline = labels.length ? bh.slice(0, labels.length) : bh
+        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: baseline
+          data: bhPoints
         })
         legend.push(`${asset} · Buy&Hold`)
       }
 
       this.option = {
         animation: true,
-        grid: { left: 40, right: 20, top: 30, bottom: 40 },
+        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: 0, data: legend },
-        xAxis: { type: 'category', data: labels, axisLabel: { formatter: v => v?.slice?.(2) } },
+        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 }) }
+          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 }],
+        dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
         series
       }
     }

src/views/LiveView.vue

@@ -2,6 +2,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import CompareChartE from '../components/CompareChartE.vue'
+import AssetTabs from '../components/AssetTabs.vue'
 import { dataService } from '../lib/dataService.js'
 
 const ASSETS = ['BTC','ETH','SOL','BNB','DOGE','XRP']
@@ -50,14 +51,7 @@ onMounted(async () => {
 
 <template>
   <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>
+    <AssetTabs v-model="asset" />
 
     <CompareChartE v-if="winnersForChart.length" :selected="winnersForChart" :visible="true" />
     <div v-else class="p-4 text-sm text-gray-500 border rounded-lg">
@@ -65,17 +59,17 @@ onMounted(async () => {
       <code>dataService.load()</code> completes. Check console for “LiveView: loaded rows” count.
     </div>
 
-    <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 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div v-for="row in winnersSorted" :key="row.agent_name+'|'+row.asset+'|'+row.model"
+           class="p-4 rounded-2xl border shadow-sm flex justify-between items-center">
+        <div class="min-w-0">
+          <div class="font-semibold truncate">{{ row.agent_name }}</div>
+          <div class="text-xs opacity-70 truncate">{{ 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 class="font-bold text-xl leading-6">{{ 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>