From 4e04835d0c486ebe58fadb2b8ff10a1c0307bb5f Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 5 May 2026 09:34:37 +0900
Subject: [PATCH] [#1051] Fix airdrop chart label overlap via banded Y-axis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces pure log Y-axis with piecewise-linear-banded Y where each of the
4 milestones (bronze/silver/gold/diamond) gets a fixed 25% band of chart
height. Within a band, position is log-interpolated between that band's
lower and upper milestone values.

Removes the Y-axis tick label column (the right-edge milestone labels are
already sufficient and stacking another column reintroduces overlap).
Adds subtle alternating band stripes for visual zone separation. Wraps
right-edge labels in a <g class="hidden sm:block"> to keep
responsive-class behavior consistent on SVG children.

Verified manually: at currentFdv=$31K with prod milestones
($1M/$10M/$50M/$100M) the heartbeat dot lands at Y≈94% (pre-bronze
band, near chart bottom); at $1M/$10M/$50M/$100M exactly it lands at
75/50/25/0% (band boundaries).

Fixes #1051

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package.json                            |   2 +-
 src/components/airdrop/CampaignHero.tsx | 146 +++++++++++++++---------
 2 files changed, 96 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index cedc8b4..cdb9374 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/components/airdrop/CampaignHero.tsx b/src/components/airdrop/CampaignHero.tsx
index 9e0a843..dbdb0c6 100644
--- a/src/components/airdrop/CampaignHero.tsx
+++ b/src/components/airdrop/CampaignHero.tsx
@@ -26,15 +26,43 @@ interface StatusData {
 
 /* ─── Chart helpers ─── */
 
-const Y_FLOOR = 1_000; // $1K minimum for log scale
-
-/** Map MCap → 0–1 on log Y scale (inverted: 0 = top, 1 = bottom) */
-function mcapToY(mcap: number, yMin: number, yMax: number): number {
-  if (mcap <= 0) return 1;
-  const logMin = Math.log10(yMin);
-  const logMax = Math.log10(yMax);
-  const clamped = Math.min(Math.max(mcap, yMin), yMax);
-  return 1 - (Math.log10(clamped) - logMin) / (logMax - logMin);
+/**
+ * Piecewise-linear-banded Y-axis: each of the 4 milestones occupies an equal
+ * 25% band of chart height. Within a band, position is log-interpolated
+ * between that band's lower and upper milestone values.
+ *
+ *   knot 0 = bronze / 100   →  100% (chart bottom)
+ *   knot 1 = bronze         →   75%
+ *   knot 2 = silver         →   50%
+ *   knot 3 = gold           →   25%
+ *   knot 4 = diamond        →    0% (chart top)
+ *
+ * Returns a fn that maps MCap → 0–1 (0 = top, 1 = bottom). Always returns a
+ * value inside the chart region, so milestone labels are 25% apart and
+ * cannot collide regardless of MCap ratios.
+ */
+function makeMcapToY(milestones: StatusData["milestones"]) {
+  const knots = [
+    milestones.bronze.mcap / 100,
+    milestones.bronze.mcap,
+    milestones.silver.mcap,
+    milestones.gold.mcap,
+    milestones.diamond.mcap,
+  ];
+  const zoneCount = knots.length - 1;
+  return (mcap: number): number => {
+    if (mcap <= knots[0]) return 1;
+    if (mcap >= knots[knots.length - 1]) return 0;
+    for (let i = 1; i < knots.length; i++) {
+      if (mcap <= knots[i]) {
+        const t =
+          (Math.log10(mcap) - Math.log10(knots[i - 1])) /
+          (Math.log10(knots[i]) - Math.log10(knots[i - 1]));
+        return 1 - (i - 1 + t) / zoneCount;
+      }
+    }
+    return 0;
+  };
 }
 
 /** Map date → 0–1 on X (time) axis */
@@ -150,13 +178,13 @@ function MCapChart({
     };
   });
 
-  // Y-axis domain: floor to diamond milestone (config-driven)
-  const yMax = milestones.diamond.mcap;
-  const yMin = Math.min(Y_FLOOR, yMax / 1000);
+  // Banded Y-axis (each milestone gets equal 25% of chart height)
+  const mcapToY = makeMcapToY(milestones);
+  const floorMcap = milestones.bronze.mcap / 100;
 
   // X/Y coordinate helpers (within chart area)
   const toX = (d: Date) => pad.left + dateToX(d, start, end) * chartW;
-  const toY = (mcap: number) => pad.top + mcapToY(mcap, yMin, yMax) * chartH;
+  const toY = (mcap: number) => pad.top + mcapToY(mcap) * chartH;
 
   // Historical line path + area fill
   const points = (history ?? []).map((p) => ({
@@ -173,13 +201,13 @@ function MCapChart({
   // Projection line: start FDV → diamond milestone at campaign end
   const startFdv = history && history.length > 0 ? history[0].fdv : currentFdv;
   const projX1 = toX(start);
-  const projY1 = toY(startFdv > 0 ? startFdv : yMin);
+  const projY1 = toY(startFdv > 0 ? startFdv : floorMcap);
   const projX2 = toX(end);
-  const projY2 = toY(yMax);
+  const projY2 = toY(milestones.diamond.mcap);
 
   // Current dot position
   const dotX = toX(now);
-  const dotY = toY(currentFdv > 0 ? currentFdv : yMin);
+  const dotY = toY(currentFdv > 0 ? currentFdv : floorMcap);
 
   // X-axis time ticks
   const totalDays = Math.ceil((end.getTime() - start.getTime()) / 86_400_000);
@@ -189,8 +217,13 @@ function MCapChart({
     xTicks.push(new Date(d));
   }
 
-  // Y-axis ticks at milestone values + floor
-  const yTicks = [yMin, ...milestoneEntries.map((m) => m.mcap)];
+  // Alternating band stripes (subtle visual band separators)
+  const bands = [
+    { yTop: 0, yBottom: 0.25 },   // gold→diamond
+    { yTop: 0.25, yBottom: 0.5 }, // silver→gold
+    { yTop: 0.5, yBottom: 0.75 }, // bronze→silver
+    { yTop: 0.75, yBottom: 1 },   // floor→bronze
+  ];
 
   return (
     <div className="space-y-3">
@@ -219,37 +252,62 @@ function MCapChart({
           rx={4}
         />
 
-        {/* Milestone horizontal dashed lines */}
+        {/* Alternating band stripes — subtle visual separation between zones */}
+        {bands.map((b, i) => (
+          i % 2 === 0 ? (
+            <rect
+              key={`band-${i}`}
+              x={pad.left}
+              y={pad.top + b.yTop * chartH}
+              width={chartW}
+              height={(b.yBottom - b.yTop) * chartH}
+              fill="var(--accent)"
+              opacity={0.04}
+            />
+          ) : null
+        ))}
+
+        {/* Milestone horizontal dashed lines (4 lines, 25% apart) */}
         {milestoneEntries.map((ms) => {
           const y = toY(ms.mcap);
           return (
-            <g key={ms.key}>
-              <line
-                x1={pad.left}
-                y1={y}
-                x2={pad.left + chartW}
-                y2={y}
-                stroke="var(--accent)"
-                strokeWidth={0.75}
-                strokeDasharray="4 3"
-                opacity={0.5}
-              />
-              {/* Right-edge label — desktop only */}
+            <line
+              key={`line-${ms.key}`}
+              x1={pad.left}
+              y1={y}
+              x2={pad.left + chartW}
+              y2={y}
+              stroke="var(--accent)"
+              strokeWidth={0.75}
+              strokeDasharray="4 3"
+              opacity={0.5}
+            />
+          );
+        })}
+
+        {/* Right-edge milestone labels — desktop only, never overlap (25% apart) */}
+        <g className="hidden sm:block">
+          {milestoneEntries.map((ms) => {
+            const y = toY(ms.mcap);
+            // Diamond (top) milestone: label below the line so it doesn't clip
+            // out of the chart area; others: above the line (standard).
+            const isTop = ms.key === "diamond";
+            return (
               <text
+                key={`label-${ms.key}`}
                 x={pad.left + chartW - 4}
-                y={y - 4}
+                y={isTop ? y + 11 : y - 4}
                 textAnchor="end"
                 fill="var(--accent)"
                 fontSize={9}
                 fontFamily="monospace"
-                opacity={0.6}
-                className="hidden sm:block"
+                opacity={0.7}
               >
                 {ms.label} — unlocks {ms.pct}%{ms.cmcRank ? ` (${ms.cmcRank})` : ""}
               </text>
-            </g>
-          );
-        })}
+            );
+          })}
+        </g>
 
         {/* Projection line (dashed) */}
         <line
@@ -316,20 +374,6 @@ function MCapChart({
           );
         })}
 
-        {/* Y-axis labels — desktop only */}
-        {yTicks.map((mcap) => (
-          <text
-            key={mcap}
-            x={pad.left + 4}
-            y={toY(mcap) - 3}
-            fill="var(--color-muted)"
-            fontSize={8}
-            fontFamily="monospace"
-            className="hidden sm:block"
-          >
-            {formatMcap(mcap)}
-          </text>
-        ))}
       </svg>
 
       {/* Mobile milestone legend */}