Change settings

src/components/CompareChartE.vue

@@ -34,6 +34,111 @@ function toPct(points){
   return points.map(([t, y]) => [t, ((y / y0) - 1) * 100])
 }
 
+// --- Agent & Model logo registries (fill with your actual assets)
+const AGENT_LOGOS = {
+  'HedgeFundAgent': new URL('../assets/images/agents_images/hedgefund.png', import.meta.url).href,
+  'DeepFundAgent': new URL('../assets/images/agents_images/deepfund.png', import.meta.url).href,
+  'TradeAgent': new URL('../assets/images/agents_images/trade.png', import.meta.url).href,
+  'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
+  // 'InvestorAgent': new URL('../assets/images/agents_images/investor.png', import.meta.url).href,
+};
+const MODEL_LOGOS = {
+  'claude_3_5_haiku_20241022': new URL('../assets/images/models_images/claude.png', import.meta.url).href,
+  'claude_sonnet_4_2025051': new URL('../assets/images/models_images/claude.png', import.meta.url).href,
+  'gpt_4o': new URL('../assets/images/models_images/gpt.png', import.meta.url).href,
+  'gpt_4.1': new URL('../assets/images/models_images/gpt.png', import.meta.url).href,
+  'gemini_2.0_flash': new URL('../assets/images/models_images/gemini.png', import.meta.url).href,
+};
+
+// Canvas badge cache: key = `${agent}|${model}|${color}`
+const BADGE_CACHE = new Map();
+
+const loadImg = (url) => new Promise((resolve, reject) => {
+  if (!url) return resolve(null);
+  const img = new Image();
+  img.crossOrigin = 'anonymous';
+  img.onload = () => resolve(img);
+  img.onerror = () => resolve(null); // fail soft
+  img.src = url;
+});
+
+// Compose a badge: [ colored circle with agent logo ] + [ white rounded square with model logo ]
+async function composeBadge(agent, model, color = '#666') {
+  const key = `${agent}|${model ?? ''}|${color}`;
+  if (BADGE_CACHE.has(key)) return BADGE_CACHE.get(key);
+
+  const aUrl = AGENT_LOGOS[agent];
+  const mUrl = MODEL_LOGOS[model];
+  if (!aUrl && !mUrl) return null; // fall back to dot later
+
+  // layout
+  const H = 26;                       // badge height
+  const circleD = 22;                  // agent chip diameter
+  const pad = 2;                       // internal spacing
+  const square = 20;                   // model chip size
+  const gap = 4;                       // space between chips
+  const W = aUrl && mUrl ? circleD + gap + square : (aUrl ? circleD : square);
+
+  const canvas = document.createElement('canvas');
+  canvas.width = W + pad * 2;
+  canvas.height = H + pad * 2;
+  const ctx = canvas.getContext('2d');
+
+  // background is transparent; draw chips
+  let x = pad, y = pad + (H - circleD) / 2;
+
+  // agent circle
+  if (aUrl) {
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(x + circleD / 2, y + circleD / 2, circleD / 2, 0, Math.PI * 2);
+    ctx.fill();
+    const aImg = await loadImg(aUrl);
+    if (aImg) {
+      const inset = 4;
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(x + circleD / 2, y + circleD / 2, circleD / 2 - 0.5, 0, Math.PI * 2);
+      ctx.clip();
+      const iw = circleD - inset * 2, ih = circleD - inset * 2;
+      ctx.globalAlpha = 0.95;
+      ctx.drawImage(aImg, x + inset, y + inset, iw, ih);
+      ctx.restore();
+    }
+    x += circleD + (mUrl ? gap : 0);
+  }
+
+  // model rounded square
+  if (mUrl) {
+    const r = 6;
+    y = pad + (H - square) / 2;
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + square - r, y);
+    ctx.quadraticCurveTo(x + square, y, x + square, y + r);
+    ctx.lineTo(x + square, y + square - r);
+    ctx.quadraticCurveTo(x + square, y + square, x + square - r, y + square);
+    ctx.lineTo(x + r, y + square);
+    ctx.quadraticCurveTo(x, y + square, x, y + square - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.fill();
+
+    const mImg = await loadImg(mUrl);
+    if (mImg) {
+      const inset = 4;
+      const iw = square - inset * 2, ih = square - inset * 2;
+      ctx.globalAlpha = 0.96;
+      ctx.drawImage(mImg, x + inset, y + inset, iw, ih);
+    }
+  }
+
+  const url = canvas.toDataURL('image/png');
+  BADGE_CACHE.set(key, url);
+  return url;
+}
+
 export default defineComponent({
   name: 'CompareChartE',
   components: { VChart },
@@ -117,18 +222,34 @@ export default defineComponent({
           lineStyle: { width: 2, color: getStrategyColor(sel.strategy || '', false, idx) },
           data: points
         })
-        const last = points[points.length - 1]
+        const last = points?.[points.length - 1];
         if (last && Number.isFinite(last[1])) {
+          const lineColor = getStrategyColor(sel.strategy || '', false, idx);
+          const badgeUrl = await composeBadge(agent, sel.model, lineColor);  // ← NEW
           series.push({
-            name: name + ' •',
+            name: name + ' •badge',
             type: 'scatter',
             data: [ last ],
-            symbol: 'circle',
-            symbolSize: 8,
-            itemStyle: { color: getStrategyColor(sel.strategy || '', false, idx) },
-            tooltip: { show: false },   // avoid duplicate tooltip
-            z: 10
-          })
+            symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
+            symbolSize: badgeUrl ? 26 : 8,
+            z: 20,
+            tooltip: { show: false },
+            label: {
+              show: true,
+              position: 'right',
+              padding: [4,8],
+              borderRadius: 10,
+              backgroundColor: lineColor,
+              color: '#fff',
+              fontWeight: 700,
+              formatter: (p) => {
+                const v = p.value?.[1];
+                if (this.mode === 'pct') return (v >= 0 ? '+' : '') + (Number(v).toFixed(2)) + '%';
+                return Number(v ?? 0).toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits: 2 });
+              }
+            },
+            itemStyle: { color: lineColor }
+          });
         }
       }
 
@@ -152,16 +273,32 @@ export default defineComponent({
         })
         const lastBH = bhPoints[bhPoints.length - 1]
         if (lastBH && Number.isFinite(lastBH[1])) {
+          const baseColor = getStrategyColor('', true, 0);
+          const badgeUrl = new URL(`../assets/images/assets_images/${asset}.png`, import.meta.url).href;
           series.push({
-            name: `${asset} · Buy&Hold •`,
+            name: `${asset} · Buy&Hold •badge`,
             type: 'scatter',
             data: [ lastBH ],
-            symbol: 'circle',
-            symbolSize: 8,
-            itemStyle: { color: getStrategyColor('', true, 0) },
+            symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
+            symbolSize: badgeUrl ? 26 : 8,
+            z: 19,
             tooltip: { show: false },
-            z: 9
-          })
+            label: {
+              show: true,
+              position: 'right',
+              padding: [4,8],
+              borderRadius: 10,
+              backgroundColor: baseColor,
+              color: '#fff',
+              fontWeight: 700,
+              formatter: (p) => {
+                const v = p.value?.[1];
+                if (this.mode === 'pct') return (v >= 0 ? '+' : '') + (Number(v).toFixed(2)) + '%';
+                return Number(v ?? 0).toLocaleString(undefined, { style:'currency', currency:'USD', maximumFractionDigits: 2 });
+              }
+            },
+            itemStyle: { color: baseColor }
+          });
         }
         legend.push(`${asset} · Buy&Hold`)
       }