Change settings

src/components/CompareChartE.vue

@@ -174,6 +174,8 @@ async function composeBadge(agent, model, color = '#666') {
   return url;
 }
 
+let markerToLine = new Map()
+
 export default defineComponent({
   name: 'CompareChartE',
   components: { VChart },
@@ -253,10 +255,14 @@ export default defineComponent({
           type: 'line',
           showSymbol: false,
           smooth: false,
-          emphasis: { focus: 'series' },
+          emphasis: {
+            focus: 'series',
+            lineStyle: { width: 3.5 },
+          },
           lineStyle: { width: 2, color: getAgentColor(agent, idx) },
           data: points
         })
+        const lineSeriesIndex = series.length - 1;
         const last = points?.[points.length - 1];
         if (last && Number.isFinite(last[1])) {
           const lineColor = getAgentColor(agent, idx);
@@ -268,7 +274,22 @@ export default defineComponent({
             symbol: badgeUrl ? `image://${badgeUrl}` : 'circle',
             symbolSize: 30,
             z: 20,
-            tooltip: { show: false },
+            tooltip: {
+              trigger: 'item',
+              appendToBody: true,
+              formatter: (p) => {
+                const v = p.value?.[1]
+                const val = this.mode === 'pct'
+                  ? `${v >= 0 ? '+' : ''}${Number(v).toFixed(2)}%`
+                  : Number(v ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
+                return [
+                  `<div style="font-weight:600">${sel.agent_name}</div>`,
+                  sel.model ? `<div style="opacity:.8">${sel.model}</div>` : '',
+                  `<div style="opacity:.8">${sel.asset}</div>`,
+                  `<div style="margin-top:4px">${val}</div>`
+                ].join('')
+              }
+            },
             label: {
               show: true,
               position: 'right',