From 54cae9d2c9c193909818b1a09d1524643eaffedc Mon Sep 17 00:00:00 2001
From: Flotapponnier <florent@mobula.io>
Date: Tue, 15 Sep 2026 01:05:37 +0200
Subject: [PATCH] compare: per-card trend charts only on perp venue pairs, with
 a y axis

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJgbZCqjR4nvCfcJSzofbw
---
 src/app/compare/[slug]/page.tsx        | 13 +++++++----
 src/components/compare-trend-chart.tsx | 31 +++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/app/compare/[slug]/page.tsx b/src/app/compare/[slug]/page.tsx
index 0b5279bb..37920584 100644
--- a/src/app/compare/[slug]/page.tsx
+++ b/src/app/compare/[slug]/page.tsx
@@ -897,6 +897,9 @@ export default async function ComparePage({
   };
 
   const comparisonProse = buildComparisonProse(shared, a.name, b.name);
+  const perpPair =
+    pair.hero === "perp-volume" ||
+    (PERP_VOLUME_COHORT.has(a.slug) && PERP_VOLUME_COHORT.has(b.slug));
 
   return (
     <main className="mx-auto max-w-5xl px-6 pt-10 pb-16 sm:pt-14">
@@ -981,8 +984,7 @@ export default async function ComparePage({
         />
       </section>
 
-      {(pair.hero === "perp-volume" ||
-        (PERP_VOLUME_COHORT.has(a.slug) && PERP_VOLUME_COHORT.has(b.slug))) && (
+      {perpPair && (
         <PerpVolumeHeadToHead
           aSlug={a.slug}
           bSlug={b.slug}
@@ -1002,8 +1004,11 @@ export default async function ComparePage({
               bench={s}
               aName={a.name}
               bName={b.name}
-              aSlug={a.slug}
-              bSlug={b.slug}
+              // Per-card trend charts only for perp venue pairs, where the
+              // benches are daily or slow-moving series worth a history.
+              // Latency / fee benches on other pairs read as flat lines.
+              aSlug={perpPair ? a.slug : undefined}
+              bSlug={perpPair ? b.slug : undefined}
             />
           ))}
         </div>
diff --git a/src/components/compare-trend-chart.tsx b/src/components/compare-trend-chart.tsx
index 458b206c..c35c9369 100644
--- a/src/components/compare-trend-chart.tsx
+++ b/src/components/compare-trend-chart.tsx
@@ -106,8 +106,8 @@ export function CompareTrendChart({
   }
 
   const W = 800;
-  const H = 150;
-  const PAD_L = 8;
+  const H = 170;
+  const PAD_L = 54;
   const PAD_R = 8;
   const PAD_T = 10;
   const PAD_B = 20;
@@ -179,7 +179,32 @@ export function CompareTrendChart({
         aria-label={`${aName} vs ${bName}, last ${range}`}
         onMouseLeave={() => setHover(null)}
       >
-        <line x1={PAD_L} x2={W - PAD_R} y1={PAD_T + plotH} y2={PAD_T + plotH} stroke="currentColor" strokeOpacity={0.2} />
+        {[0, 0.5, 1].map((f) => {
+          const v = min + f * span;
+          return (
+            <g key={f}>
+              <line
+                x1={PAD_L}
+                x2={W - PAD_R}
+                y1={y(v)}
+                y2={y(v)}
+                stroke="currentColor"
+                strokeOpacity={f === 0 ? 0.25 : 0.08}
+              />
+              <text
+                x={PAD_L - 6}
+                y={y(v) + 3}
+                textAnchor="end"
+                fontSize={9}
+                fill="currentColor"
+                fillOpacity={0.55}
+                style={{ fontFamily: "var(--font-mono, monospace)" }}
+              >
+                {fmtUnit(v, unit)}
+              </text>
+            </g>
+          );
+        })}
         <path d={path(series.a)} fill="none" stroke={aColor} strokeWidth={1.8} strokeLinejoin="round" />
         <path d={path(series.b)} fill="none" stroke={bColor} strokeWidth={1.8} strokeLinejoin="round" />
         {hover !== null && (