Change settings

src/components/CompareChartE.vue

@@ -23,20 +23,32 @@ echarts.use([LineChart, GridComponent, LegendComponent, TooltipComponent, DataZo
 
 const ASSET_CUTOFF = {
   BTC: '2025-08-01',
-  // ETH: '2025-08-15',  // example if you add others later
+  // ETH: '2025-08-15',
 };
 
+// helper: convert [ [date, y], ... ] into % since first y
+function toPct(points){
+  if (!Array.isArray(points) || !points.length) return points
+  const y0 = points[0][1]
+  if (typeof y0 !== 'number' || !isFinite(y0) || y0 === 0) return points
+  return points.map(([t, y]) => [t, ((y / y0) - 1) * 100])
+}
+
 export default defineComponent({
   name: 'CompareChartE',
   components: { VChart },
   props: {
     selected: { type: Array, default: () => [] },
-    visible: { type: Boolean, default: true }
+    visible: { type: Boolean, default: true },
+    // NEW: $/% toggle
+    mode: { type: String, default: 'usd' } // 'usd' | 'pct'
   },
   data(){ return { option: {} } },
   watch: {
     selected: { deep: true, handler(){ this.rebuild() } },
-    visible(v){ if (v) this.$nextTick(() => this.rebuild()) }
+    visible(v){ if (v) this.$nextTick(() => this.rebuild()) },
+    // NEW: rebuild when the toggle changes
+    mode(){ this.rebuild() }
   },
   mounted(){ this.$nextTick(() => this.rebuild()) },
   methods: {
@@ -72,7 +84,7 @@ export default defineComponent({
         groupKeyToSeq.set(`${agent}|${asset}|${model}`, { sel, seq: filtered })
       }
 
-      // 2) Build series using (time,value) pairs => no misalignment
+      // 2) Build series using (time,value) pairs
       const series = []
       const legend = []
       const assets = new Set()
@@ -89,7 +101,10 @@ export default defineComponent({
 
         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
+        let points = seq.map((row, i) => [row.date, stratY[i]])
+
+        // NEW: convert to % mode if requested
+        if (this.mode === 'pct') points = toPct(points)
 
         const name = `${agent} · ${sel.model} · ${cfg.label}`
         legend.push(name)
@@ -99,18 +114,22 @@ export default defineComponent({
           showSymbol: false,
           smooth: false,
           emphasis: { focus: 'series' },
-          lineStyle: { width: 2 },
+          lineStyle: { width: 2, color: getStrategyColor(sel.strategy || '', false, idx) },
           areaStyle: { opacity: 0.06 },
           data: points
         })
       }
 
-      // 3) Buy & Hold baseline per asset (also time/value points)
+      // 3) Buy & Hold baseline per asset
       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]])
+        let bhPoints = entry.seq.map((row, i) => [row.date, bhY[i]])
+
+        // NEW: % mode for baseline too
+        if (this.mode === 'pct') bhPoints = toPct(bhPoints)
+
         series.push({
           name: `${asset} · Buy&Hold`,
           type: 'line',
@@ -128,16 +147,25 @@ export default defineComponent({
         tooltip: {
           trigger: 'axis',
           axisPointer: { type: 'line' },
-          valueFormatter: v => typeof v === 'number'
-            ? v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
-            : v
+          // NEW: format per mode
+          valueFormatter: v => {
+            if (typeof v !== 'number') return v
+            return this.mode === 'pct'
+              ? `${v.toFixed(2)}%`
+              : v.toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 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 }) }
-        },
+        xAxis: { type: 'time' },
+        yAxis: this.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 }) }
+            },
         dataZoom: [{ type: 'inside', throttle: 50 }, { type: 'slider', height: 14, bottom: 36 }],
         series
       }