Change settings

src/components/CompareChartE.vue

@@ -26,6 +26,26 @@ const ASSET_CUTOFF = {
   // ETH: '2025-08-15',
 };
 
+// Stable palette per agent (tweak as you like)
+const AGENT_PALETTE = [
+  '#6D4CFE', // indigo
+  '#FF6B6B', // coral
+  '#10B981', // emerald
+  '#F59E0B', // amber
+  '#06B6D4', // cyan
+  '#A855F7', // violet
+  '#64748B', // slate
+  '#E11D48', // rose
+  '#0EA5E9', // sky
+  '#84CC16', // lime
+]
+
+// pick color by agent name + index (from agentColorIndex map)
+function getAgentColor(agent, idx = 0) {
+  // keep simple + deterministic
+  return AGENT_PALETTE[idx % AGENT_PALETTE.length]
+}
+
 // helper: convert [ [date, y], ... ] into % since first y
 function toPct(points){
   if (!Array.isArray(points) || !points.length) return points
@@ -98,7 +118,7 @@ async function composeBadge(agent, model, color = '#666') {
 
   // model puck (bottom-right)
   if (mImg) {
-    const d = 14, r = d / 2;                  // puck diameter
+    const d = 30, r = d / 2;                  // puck diameter
     const cx = S - r + 1, cy = S - r + 1;     // slight outside bias
     // white border
     ctx.fillStyle = '#fff';
@@ -196,12 +216,12 @@ export default defineComponent({
           showSymbol: false,
           smooth: false,
           emphasis: { focus: 'series' },
-          lineStyle: { width: 2, color: getStrategyColor(sel.strategy || '', false, idx) },
+          lineStyle: { width: 2, color: getAgentColor(agent, idx) },
           data: points
         })
         const last = points?.[points.length - 1];
         if (last && Number.isFinite(last[1])) {
-          const lineColor = getStrategyColor(sel.strategy || '', false, idx);
+          const lineColor = getAgentColor(agent, idx);
           const badgeUrl = await composeBadge(agent, sel.model, lineColor);  // ← NEW
           series.push({
             name: name + ' •badge',
@@ -251,7 +271,7 @@ export default defineComponent({
         const lastBH = bhPoints[bhPoints.length - 1]
         if (lastBH && Number.isFinite(lastBH[1])) {
           const baseColor = getStrategyColor('', true, 0);
-          const badgeUrl = await composeBadge(asset, null, '#fff');  // ← NEW
+          const badgeUrl = await composeBadge(asset, null, baseColor);  // ← NEW
           series.push({
             name: `${asset} · Buy&Hold •badge`,
             type: 'scatter',