From 9975c2098bcad421ad6d5b23f9bea149d6375e2c Mon Sep 17 00:00:00 2001
From: Celes Renata <celes@frameshift.net>
Date: Wed, 29 Apr 2026 21:43:44 +0000
Subject: [PATCH] fix: limit X-axis to 8 ticks with date bold + time at angle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was showing every data point timestamp. Now:
- Recharts generates max 8 evenly-spaced ticks
- Each tick shows 'Apr 29' in bold white + '2 PM' in gray
- All labels at -35° angle to avoid overlap
- Simplified tick component (no hour-boundary filtering needed)
---
 frontend/src/pages/CompanyDetail.tsx | 29 +++++++---------------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/CompanyDetail.tsx b/frontend/src/pages/CompanyDetail.tsx
index f6c1093..9f4e1d6 100644
--- a/frontend/src/pages/CompanyDetail.tsx
+++ b/frontend/src/pages/CompanyDetail.tsx
@@ -606,29 +606,14 @@ function ChartXTick({ x, y, payload }: { x?: number; y?: number; payload?: { val
   if (!payload || !x || !y) return null;
   const d = new Date(payload.value);
   const hour = d.getHours();
-  const minute = d.getMinutes();
-  const isNewDay = hour === 0 && minute < 30;
-  const isHourMark = minute < 15; // Show only on-the-hour ticks
+  const dateStr = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  const timeStr = d.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true });
 
-  // For date labels (new day boundary)
-  if (isNewDay) {
-    const label = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-    return (
-      <g transform={`translate(${x},${y})`}>
-        <text x={0} y={12} textAnchor="middle" fill="#e2e8f0" fontSize={11} fontWeight="bold">
-          {label}
-        </text>
-      </g>
-    );
-  }
-
-  // For time labels — show rounded hours at an angle
-  if (!isHourMark) return null;
-  const timeStr = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
   return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={8} textAnchor="end" fill="#94a3b8" fontSize={10} transform="rotate(-35)">
-        {timeStr}
+    <g transform={`translate(${x},${y + 4})`}>
+      <text x={0} y={0} textAnchor="end" fontSize={10} transform="rotate(-35)">
+        <tspan fill="#e2e8f0" fontWeight="bold">{dateStr} </tspan>
+        <tspan fill="#94a3b8">{timeStr}</tspan>
       </text>
     </g>
   );
@@ -808,7 +793,7 @@ function TrendHistoryChart({ trends, latestTrends, ticker, marketPrices, selecte
                   scale="time"
                   tick={<ChartXTick />}
                   tickLine={{ stroke: '#475569' }}
-                  interval="preserveStartEnd"
+                  tickCount={8}
                 />
                 <YAxis
                   yAxisId="left"