feat: add historical chart range selector (1D, 5D, 1M, 6M, YTD, 1Y, 5Y, MAX) powered by yfinance

backend/app/graphql/schema.py

@@ -130,11 +130,113 @@ class Query:
         return await crud.get_user_alerts(db, user.id)
 
     @strawberry.field
-    async def stock_history(self, info: Info, ticker: str, limit: int = 100) -> List[StockHistoryType]:
-        """Fetch historical 1-minute aggregated candles for a ticker."""
-        # Open query: no login required to look at historical charts
+    async def stock_history(self, info: Info, ticker: str, range: str = "1d") -> List[StockHistoryType]:
+        """Fetch historical aggregated candles for a ticker based on range (1d, 5d, 1m, 6m, ytd, 1y, 5y, max)."""
         db = info.context["db"]
-        return await crud.get_stock_history(db, ticker, limit)
+        
+        range_mapping = {
+            "1d":   {"period": "1d",   "interval": "2m"},
+            "5d":   {"period": "5d",   "interval": "15m"},
+            "1m":   {"period": "1mo",  "interval": "1d"},
+            "6m":   {"period": "6mo",  "interval": "1d"},
+            "ytd":  {"period": "ytd",  "interval": "1d"},
+            "1y":   {"period": "1y",   "interval": "1d"},
+            "5y":   {"period": "5y",   "interval": "1wk"},
+            "max":  {"period": "max",  "interval": "1mo"}
+        }
+        
+        selected_range = range.lower()
+        if selected_range not in range_mapping:
+            selected_range = "1d"
+            
+        config = range_mapping[selected_range]
+        
+        # If it's 1d, let's try local DB first
+        if selected_range == "1d":
+            try:
+                local_data = await crud.get_stock_history(db, ticker, limit=100)
+                if len(local_data) > 10:
+                    return [
+                        StockHistoryType(
+                            id=h.id,
+                            ticker=h.ticker,
+                            timestamp=h.timestamp,
+                            open=h.open,
+                            high=h.high,
+                            low=h.low,
+                            close=h.close,
+                            volume=h.volume
+                        ) for h in local_data
+                    ]
+            except Exception as db_err:
+                print(f"Error querying local DB for ticker history: {db_err}")
+
+        # Otherwise, dynamically fetch from Yahoo Finance in a thread pool
+        try:
+            import yfinance as yf
+            loop = asyncio.get_event_loop()
+            yf_ticker = yf.Ticker(ticker)
+            
+            df = await loop.run_in_executor(
+                None, 
+                lambda: yf_ticker.history(period=config["period"], interval=config["interval"])
+            )
+            
+            history_list = []
+            if not df.empty:
+                df = df.reset_index()
+                
+                time_col = None
+                for col in ['Date', 'Datetime', 'index', 'timestamp']:
+                    if col in df.columns:
+                        time_col = col
+                        break
+                
+                if time_col:
+                    # Limit to last 350 points to ensure smooth chart performance
+                    df = df.tail(350)
+                    for i, row in df.iterrows():
+                        ts = row[time_col]
+                        if hasattr(ts, 'to_pydatetime'):
+                            ts_dt = ts.to_pydatetime()
+                        elif isinstance(ts, str):
+                            ts_dt = datetime.datetime.fromisoformat(ts)
+                        else:
+                            ts_dt = ts
+                            
+                        if ts_dt.tzinfo is not None:
+                            ts_dt = ts_dt.replace(tzinfo=None)
+                            
+                        history_list.append(
+                            StockHistoryType(
+                                id=i,
+                                ticker=ticker.upper(),
+                                timestamp=ts_dt,
+                                open=float(row["Open"]),
+                                high=float(row["High"]),
+                                low=float(row["Low"]),
+                                close=float(row["Close"]),
+                                volume=int(row["Volume"]) if "Volume" in row else 0
+                            )
+                        )
+            return history_list
+        except Exception as e:
+            print(f"Error fetching yfinance history for {ticker}: {str(e)}")
+            # Failover fallback
+            local_data = await crud.get_stock_history(db, ticker, limit=100)
+            return [
+                StockHistoryType(
+                    id=h.id,
+                    ticker=h.ticker,
+                    timestamp=h.timestamp,
+                    open=h.open,
+                    high=h.high,
+                    low=h.low,
+                    close=h.close,
+                    volume=h.volume
+                ) for h in local_data
+            ]
+
 
 
 # ==========================================

frontend/src/App.css

@@ -1418,3 +1418,37 @@
   font-size: 13px;
   z-index: 10;
 }
+
+/* Chart Range Selector */
+.chart-range-selector {
+  display: flex;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--border-glass);
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.range-btn {
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 5px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+}
+
+.range-btn:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.range-btn.active {
+  color: #08060e;
+  background: var(--neon-cyan);
+  box-shadow: 0 0 10px rgba(0, 242, 254, 0.2);
+  font-weight: 700;
+}
+

frontend/src/App.tsx

@@ -51,6 +51,7 @@ export default function App() {
   const [activeTicker, setActiveTicker] = useState<string>('AAPL');
   const [chartData, setChartData] = useState<any[]>([]);
   const [alerts, setAlerts] = useState<any[]>([]);
+  const [chartRange, setChartRange] = useState<string>('1d');
   
   // AI Insights State
   const [insight, setInsight] = useState<any>(null);
@@ -138,18 +139,31 @@ export default function App() {
     const fetchHistory = async () => {
       try {
         const historyData = await graphqlRequest(`
-          query GetHistory($ticker: String!) {
-            stockHistory(ticker: $ticker, limit: 30) {
+          query GetHistory($ticker: String!, $range: String!) {
+            stockHistory(ticker: $ticker, range: $range) {
               timestamp
               close
             }
           }
-        `, { ticker: activeTicker });
+        `, { ticker: activeTicker, range: chartRange });
         
-        const formatted = historyData.stockHistory.map((h: any) => ({
-          time: new Date(h.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-          price: parseFloat(h.close.toFixed(2)),
-        }));
+        const formatted = historyData.stockHistory.map((h: any) => {
+          const dateObj = new Date(h.timestamp);
+          let timeLabel = '';
+          if (chartRange === '1d') {
+            timeLabel = dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+          } else if (chartRange === '5d') {
+            timeLabel = dateObj.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + dateObj.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+          } else if (chartRange === '1y' || chartRange === '5y' || chartRange === 'max') {
+            timeLabel = dateObj.toLocaleDateString([], { year: '2-digit', month: 'short' });
+          } else {
+            timeLabel = dateObj.toLocaleDateString([], { month: 'short', day: 'numeric' });
+          }
+          return {
+            time: timeLabel,
+            price: parseFloat(h.close.toFixed(2)),
+          };
+        });
         setChartData(formatted);
       } catch (err) {
         console.error('Failed to load stock history', err);
@@ -159,7 +173,7 @@ export default function App() {
     fetchHistory();
     // Reset insight when active stock changes
     setInsight(null);
-  }, [token, activeTicker]);
+  }, [token, activeTicker, chartRange]);
 
   // 4. WebSocket Live Price Streaming Subscription (graphql-transport-ws protocol)
   useEffect(() => {
@@ -446,6 +460,8 @@ export default function App() {
       loadingInsight={loadingInsight}
       insightError={insightError}
       showRecharge={showRecharge}
+      chartRange={chartRange}
+      onRangeChange={setChartRange}
       onSelectTicker={setActiveTicker}
       onAddTicker={handleAddWatchlist}
       onRemoveTicker={handleRemoveWatchlist}

frontend/src/components/StockChart.tsx

@@ -9,11 +9,24 @@ interface ChartDataPoint {
 interface StockChartProps {
   activeTicker: string;
   chartData: ChartDataPoint[];
+  chartRange: string;
+  onRangeChange: (range: string) => void;
 }
 
-export default function StockChart({ activeTicker, chartData }: StockChartProps) {
+export default function StockChart({ activeTicker, chartData, chartRange, onRangeChange }: StockChartProps) {
   const currentPrice = chartData.length > 0 ? chartData[chartData.length - 1].price : null;
 
+  const ranges = [
+    { label: '1D', value: '1d' },
+    { label: '5D', value: '5d' },
+    { label: '1M', value: '1m' },
+    { label: '6M', value: '6m' },
+    { label: 'YTD', value: 'ytd' },
+    { label: '1Y', value: '1y' },
+    { label: '5Y', value: '5y' },
+    { label: 'MAX', value: 'max' }
+  ];
+
   return (
     <div className="glass-panel chart-panel">
       <div className="chart-header">
@@ -27,6 +40,18 @@ export default function StockChart({ activeTicker, chartData }: StockChartProps)
             <span>Live</span>
           </div>
         </div>
+
+        <div className="chart-range-selector">
+          {ranges.map((r) => (
+            <button
+              key={r.value}
+              className={`range-btn ${chartRange === r.value ? 'active' : ''}`}
+              onClick={() => onRangeChange(r.value)}
+            >
+              {r.label}
+            </button>
+          ))}
+        </div>
       </div>
 
       <div className="chart-container">

frontend/src/pages/Dashboard.tsx

@@ -16,6 +16,8 @@ interface DashboardProps {
   loadingInsight: boolean;
   insightError: string | null;
   showRecharge: boolean;
+  chartRange: string;
+  onRangeChange: (range: string) => void;
   onSelectTicker: (ticker: string) => void;
   onAddTicker: (ticker: string) => Promise<void>;
   onRemoveTicker: (ticker: string) => Promise<void>;
@@ -40,6 +42,8 @@ export default function Dashboard({
   loadingInsight,
   insightError,
   showRecharge,
+  chartRange,
+  onRangeChange,
   onSelectTicker,
   onAddTicker,
   onRemoveTicker,
@@ -81,6 +85,8 @@ export default function Dashboard({
           <StockChart 
             activeTicker={activeTicker} 
             chartData={chartData} 
+            chartRange={chartRange}
+            onRangeChange={onRangeChange}
           />
           <AIAnalyst
             activeTicker={activeTicker}