DemoBuy

Markets & Screener

Last updated on 2026-05-31

The markets module provides four screens for discovering and analyzing market opportunities. It includes a configurable stock screener, real-time scanner signals, a visual sector heatmap, and a combined economic and earnings calendar. All screens are in the (app) route group.

Stock Screener

Route: /markets/screener

A powerful stock screening tool with configurable filters and a sortable data table.

  • Filter panel -- ScreenerFilters component with configurable criteria:
    • Market cap range -- slider or preset (Mega Cap, Large Cap, Mid Cap, Small Cap, Micro Cap)
    • Price range -- min/max price inputs
    • Volume -- minimum average volume threshold
    • Sector -- multi-select dropdown for sector filtering
    • Exchange -- multi-select for NYSE, NASDAQ, AMEX
    • P/E ratio -- range filter for valuation screening
    • Dividend yield -- minimum yield percentage
    • 52-week position -- percent from 52-week high or low
    • Technical -- RSI range, SMA crossover filters
  • Screener presets -- saved filter configurations (e.g., "High Dividend", "Growth Stocks", "Oversold", "Blue Chips") that load predefined filter combinations
  • Results table -- ScreenerTable showing filtered stocks with columns for ticker, company name, price, change %, volume, market cap, P/E ratio, EPS, dividend yield, 52-week range, and sector badge
  • Sort -- click any column header to sort ascending/descending
  • Row click -- clicking a row navigates to the stock detail page
import { ScreenerFilters } from "@/components/markets/screener-filters"
import { ScreenerTable } from "@/components/markets/screener-table"

Screener Layout

┌───────────────────────────────────────────┐
│ Screener Filters                         │
│ [Sector ▾] [Exchange ▾] [Market Cap ▾]   │
│ [P/E Range] [Div Yield] [Volume]         │
├───────────────────────────────────────────┤
│ Results (245 stocks)                     │
│ Ticker  Name       Price  Chg%  Vol  Cap │
│ AAPL    Apple     $192   +1.2% 45M  3.0T│
│ MSFT    Microsoft $420   +0.8% 22M  3.1T│
│ GOOGL   Alphabet  $175   +1.5% 18M  2.1T│
│ ...                                      │
└───────────────────────────────────────────┘

Available Screener Metrics

Metric Description
Price Current stock price
Change % Daily percentage change
Volume Trading volume
Market Cap Total market capitalization
P/E Ratio Price-to-earnings ratio
EPS Earnings per share
Dividend Yield Annual dividend yield %
Beta Volatility relative to market
52W High % Distance from 52-week high
RSI Relative Strength Index
SMA 20/50/200 Simple moving averages

Data Sources

Data Source Location
Screener stocks screenerStocks data/seed.ts
Sector list Derived from positions types/index.ts

Market Scanner

Route: /markets/scanner

Real-time market scanner displaying technical signals and trading patterns.

  • Signal cards -- grid of SignalCard components, each showing:
    • Signal type badge -- color-coded badge (Breakout = teal, Golden Cross = green, Volume Spike = amber, Gap Up = blue, Oversold = purple, New High = indigo)
    • Ticker and name -- stock identifier and company name
    • Signal strength -- indicator bar showing weak, moderate, or strong signal
    • Price and change -- current price with change amount and percentage
    • Volume -- current volume with comparison to average
    • Triggered time -- relative timestamp of when the signal fired
  • Signal type filter -- pill-style tabs to filter by signal type (All, Breakout, Golden Cross, Volume Spike, Gap, Oversold/Overbought, New High/Low)
  • Sector filter -- dropdown to filter signals by sector
import { SignalCard } from "@/components/markets/signal-card"

Signal Types

Signal Color Description
Breakout teal Price breaks above resistance level
Breakdown red Price breaks below support level
Golden Cross green 50-day SMA crosses above 200-day SMA
Death Cross red 50-day SMA crosses below 200-day SMA
Volume Spike amber Volume exceeds 2x average volume
Gap Up blue Opening price significantly above prior close
Gap Down red Opening price significantly below prior close
New High indigo New 52-week high
New Low gray New 52-week low
Oversold purple RSI below 30
Overbought orange RSI above 70

Data Sources

Data Source Location
Scanner signals scannerSignals data/seed.ts

Sector Heatmap

Route: /markets/heatmap

A visual heatmap showing sector and stock performance at a glance.

  • Heatmap grid -- HeatmapGrid component displaying stocks as sized rectangles grouped by sector; each cell is colored by daily change percentage (green gradient for gains, red gradient for losses); cell size represents relative market cap
  • Sector table -- SectorTable showing performance data for each sector with columns for sector name, change percentage, market cap, number of advancers vs decliners, top gainer, and top loser
  • Color scale -- gradient legend from deep red (-5%+) through neutral gray (0%) to deep green (+5%+)
  • Hover tooltip -- hovering over a heatmap cell shows the full stock name, exact change percentage, price, and volume
import { HeatmapGrid } from "@/components/markets/heatmap-grid"
import { SectorTable } from "@/components/markets/sector-table"

Heatmap Color Scale

Range Color
< -3% Deep red
-3% to -1% Medium red
-1% to 0% Light red
0% Gray
0% to +1% Light green
+1% to +3% Medium green
> +3% Deep green

Economic & Earnings Calendar

Route: /markets/calendar

A combined calendar showing upcoming economic events, earnings reports, and IPOs.

  • Tab navigation -- three tabs for Earnings, Economic Events, and IPOs
  • Earnings table -- EarningsTable showing upcoming and recent earnings with columns for date, ticker, company name, estimated EPS, consensus EPS, report timing (Before Market/After Market), and earnings surprise (for reported results)
  • Economic events table -- EconomicTable showing macroeconomic releases with columns for date, time, event name, country flag, impact level badge (High = red, Medium = amber, Low = green), previous value, forecast, and actual
  • IPO cards -- IpoCards grid showing upcoming IPOs with company name, ticker, expected date, price range, exchange, sector, and status badge (Upcoming, Priced, Trading, Postponed)
import { EarningsTable } from "@/components/markets/earnings-table"
import { EconomicTable } from "@/components/markets/economic-table"
import { IpoCards } from "@/components/markets/ipo-cards"

Economic Event Impact Levels

Impact Badge Color Example Events
High red FOMC Rate Decision, Non-Farm Payrolls, CPI
Medium amber Retail Sales, Housing Starts, ISM PMI
Low green Consumer Sentiment, Factory Orders

Earnings Report Timing

Timing Description
Before Market (BMO) Reported before market open
After Market (AMC) Reported after market close
During Market Reported during trading hours

Data Sources

Data Source Location
Earnings events earningsEvents data/seed.ts
Economic events economicEvents data/seed.ts
IPO events ipoEvents data/seed.ts
Sector data sectorData data/seed.ts
Heatmap data heatmapStocks data/seed.ts

Next Steps

Previous

Trading & Orders

Next

Research & Analysis