Show description
Trading Metric Radar – Interactive Cheat Sheet
Trading Metric Radar – Interactive Cheat Sheet
$
MEGABRAIN TERMINAL
Interactive trading metric cheat sheet
Hover any tile to see what it means
Watchlist Columns
Core data you see in a typical trading table.
Symbol
ID
Stock’s short name.
Name
Label
Full company name.
Sparkline
Mini chart
Tiny visual of today’s price path.
Last
Price
Current trade price.
% Change
Move
Today’s gain or loss in %.
Market Cap
Size
Company’s total value (in B or M).
Volume
Flow
Shares traded today.
Avg Vol (3M)
Baseline
Typical daily volume.
% Turnover
Heat
How much of the float traded.
% Range
Vol
How far price travelled today.
Prev Close
Anchor
Price at yesterday’s close.
Open
Start
First trade of the day.
High / Low
Range
Today’s extremes.
Bid / Ask
Spread
Live auction prices.
Last w/ Ext
24h feel
Price including extended hours.
Exchange
Venue
Where it trades.
Symbol
Name
Last
% Change
Volume
% Turnover
SMR
Nuclear Co (demo)
21.40
+14.3%
18.2M
26.4%
SOUN
AI Voice Labs (demo)
6.82
+8.9%
9.7M
11.2%
TNXP
Bio Spec (demo)
1.35
-9.1%
3.1M
7.9%
How It All Connects – Spotting Setups
Playbook 1
Hot & Liquid Momentum
% Change ≥ +4–7% (already moving).
Volume ≥ average volume (RVOL > 2×).
% Turnover ≥ 3–10% (float is churning).
% Range high, and price near day’s high.
Spread (Bid/Ask) small so you can get in/out easily.
Use this for nuclear / AI / quantum runners.…
Trading Metric Radar – Interactive Cheat Sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Trading Metric Radar – Interactive Cheat Sheet</title>
<style>
:root {
--bg: #050811;
--bg-alt: #0b1020;
--accent: #00ffc3;
--accent-soft: #00ffc366;
--accent2: #28a5ff;
--text-main: #e6ebff;
--text-soft: #9aa4d0;
--danger: #ff4b81;
--success: #3dff8a;
--border-soft: #222944;
--shadow-soft: 0 0 18px rgba(0, 0, 0, 0.7);
--radius: 14px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
background: radial-gradient(circle at top, #101630 0, #03040a 55%);
color: var(--text-main);
min-height: 100vh;
}
.app-shell {
max-width: 1200px;
margin: 24px auto 40px;
padding: 0 16px;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: conic-gradient(
from 210deg,
var(--accent),
var(--accent2),
#ff4b81,
var(--accent)
);
box-shadow: 0 0 20px rgba(0, 255, 195, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #050811;
font-size: 18px;
}
.logo-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.logo-text span:first-child {
font-weight: 700;
letter-spacing: 0.08em;
font-size: 13px;
text-transform: uppercase;
}
.logo-text span:last-child {
font-size: 11px;
color: var(--text-soft);
}
.session-pill {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--accent-soft);
background: linear-gradient(
90deg,
rgba(0, 255, 195, 0.06),
rgba(40, 165, 255, 0.02)
);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
}
.main-grid {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(260px, 1.4fr);
gap: 18px;
}
.panel {
background: linear-gradient(135deg, #080c18, #050811);
border-radius: var(--radius);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-soft);
padding: 16px 16px 18px;
position: relative;
overflow: hidden;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.panel-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-soft);
}
.panel-title span {
color: var(--accent);
}
.panel-subtitle {
font-size: 11px;
color: var(--text-soft);
}
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-top: 8px;
}
.metric {
position: relative;
border-radius: 10px;
border: 1px solid rgba(120, 134, 190, 0.55);
background: radial-gradient(circle at top left, #182242, #050816);
padding: 7px 8px 9px;
cursor: default;
display: flex;
flex-direction: column;
gap: 3px;
transition: border-color 0.15s ease, transform 0.15s ease,
box-shadow 0.15s ease, background 0.15s ease;
font-size: 11px;
}
.metric:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 0 16px rgba(0, 255, 195, 0.22);
background: radial-gradient(circle at top left, #1d2a4d, #070b17);
}
.metric-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-main);
}
.metric-tag {
font-size: 9px;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(154, 164, 208, 0.6);
color: var(--text-soft);
text-transform: uppercase;
}
.metric-mini {
font-size: 10px;
color: var(--text-soft);
}
/* Tooltip */
.metric::after {
content: attr(data-description);
position: absolute;
left: 10px;
top: 100%;
width: 260px;
max-width: 80vw;
margin-top: 8px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(10, 14, 30, 0.98);
border: 1px solid var(--accent-soft);
color: var(--text-soft);
font-size: 11px;
line-height: 1.4;
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 0.16s ease, transform 0.16s ease;
z-index: 20;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.65);
}
.metric:hover::after {
opacity: 1;
transform: translateY(0);
}
.metric::before {
content: '';
position: absolute;
left: 22px;
top: 100%;
margin-top: 2px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent rgba(10, 14, 30, 0.98) transparent;
opacity: 0;
transition: opacity 0.16s ease;
z-index: 21;
}
.metric:hover::before {
opacity: 1;
}
.watchlist-demo {
margin-top: 10px;
border-radius: 10px;
border: 1px solid var(--border-soft);
overflow: hidden;
font-size: 11px;
}
.wl-header,
.wl-row {
display: grid;
grid-template-columns: 60px minmax(0, 1.4fr) 60px 70px 70px 80px;
}
.wl-header {
background: linear-gradient(90deg, #0b1224, #050a14);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-soft);
border-bottom: 1px solid var(--border-soft);
}
.wl-header div,
.wl-row div {
padding: 5px 8px;
border-right: 1px solid #161c32;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wl-row {
background: rgba(7, 10, 24, 0.96);
}
.wl-row:nth-child(2) {
background: radial-gradient(circle at left, rgba(0, 255, 195, 0.16), #050812);
}
.wl-row:nth-child(3) {
background: radial-gradient(circle at left, rgba(61, 255, 138, 0.15), #050812);
}
.wl-row span.green {
color: var(--success);
}
.wl-row span.red {
color: var(--danger);
}
/* Sidebar cards */
.side-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
.mini-card {
background: linear-gradient(140deg, #090f1c, #050814);
border-radius: var(--radius);
border: 1px solid var(--border-soft);
padding: 10px 12px 12px;
box-shadow: var(--shadow-soft);
font-size: 11px;
}
.mini-title {
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-soft);
margin-bottom: 4px;
}
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.pill {
font-size: 10px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(154, 164, 208, 0.7);
color: var(--text-soft);
background: rgba(10, 16, 32, 0.9);
}
.pill.hot {
border-color: var(--accent-soft);
color: var(--accent);
background: rgba(0, 255, 195, 0.06);
}
/* Playbook section */
.playbook {
margin-top: 20px;
padding-top: 14px;
border-top: 1px solid #181f36;
}
.playbook h2 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-soft);
margin-bottom: 10px;
}
.playbook-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.play-card {
background: radial-gradient(circle at top, #18223f, #050811);
border-radius: 12px;
border: 1px solid var(--border-soft);
padding: 10px 11px 11px;
font-size: 11px;
}
.play-card h3 {
font-size: 12px;
margin-bottom: 5px;
color: var(--accent);
}
.play-tag {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-soft);
margin-bottom: 5px;
}
.play-card ul {
padding-left: 16px;
line-height: 1.4;
}
.play-card ul li + li {
margin-top: 2px;
}
.play-note {
margin-top: 8px;
font-size: 10px;
color: var(--text-soft);
}
@media (max-width: 860px) {
.main-grid {
grid-template-columns: minmax(0, 1fr);
}
}
</style>
</head>
<body>
<div class="app-shell">
<header>
<div class="logo">
<div class="logo-icon">$</div>
<div class="logo-text">
<span>MEGABRAIN TERMINAL</span>
<span>Interactive trading metric cheat sheet</span>
</div>
</div>
<div class="session-pill">Hover any tile to see what it means</div>
</header>
<div class="main-grid">
<!-- LEFT: MAIN METRICS -->
<div class="panel">
<div class="panel-header">
<div>
<div class="panel-title">
Watchlist <span>Columns</span>
</div>
<div class="panel-subtitle">
Core data you see in a typical trading table.
</div>
</div>
</div>
<div class="metric-grid">
<!-- Quote / table metrics -->
<div
class="metric"
data-description="Ticker shortcut the stock trades under. When you type SMR, SOUN, etc., this is what you’re entering."
>
<div class="metric-label">
<span>Symbol</span>
<span class="metric-tag">ID</span>
</div>
<div class="metric-mini">Stock’s short name.</div>
</div>
<div
class="metric"
data-description="Company name tied to the ticker. Helps you quickly see if you’re in a nuclear name, AI, biotech, etc."
>
<div class="metric-label">
<span>Name</span>
<span class="metric-tag">Label</span>
</div>
<div class="metric-mini">Full company name.</div>
</div>
<div
class="metric"
data-description="Mini intraday chart. Smooth up & right = trend. One giant spike then flat = news pop that may fade."
>
<div class="metric-label">
<span>Sparkline</span>
<span class="metric-tag">Mini chart</span>
</div>
<div class="metric-mini">Tiny visual of today’s price path.</div>
</div>
<div
class="metric"
data-description="Most recent traded price. This is where buyers and sellers just met."
>
<div class="metric-label">
<span>Last</span>
<span class="metric-tag">Price</span>
</div>
<div class="metric-mini">Current trade price.</div>
</div>
<div
class="metric"
data-description="Percent move from yesterday’s close to the current price. Big positive = strong green day; big negative = selloff."
>
<div class="metric-label">
<span>% Change</span>
<span class="metric-tag">Move</span>
</div>
<div class="metric-mini">Today’s gain or loss in %.</div>
</div>
<div
class="metric"
data-description="Total dollar value of the company (share price × shares outstanding). Larger caps move slower; small caps move wilder."
>
<div class="metric-label">
<span>Market Cap</span>
<span class="metric-tag">Size</span>
</div>
<div class="metric-mini">Company’s total value (in B or M).</div>
</div>
<div
class="metric"
data-description="Number of shares traded today so far. On its own this shows activity; compared to average volume it shows how crazy today is."
>
<div class="metric-label">
<span>Volume</span>
<span class="metric-tag">Flow</span>
</div>
<div class="metric-mini">Shares traded today.</div>
</div>
<div
class="metric"
data-description="Average daily volume over the last few months. Use it as a baseline to see if today is normal or unusually active."
>
<div class="metric-label">
<span>Avg Vol (3M)</span>
<span class="metric-tag">Baseline</span>
</div>
<div class="metric-mini">Typical daily volume.</div>
</div>
<div
class="metric"
data-description="Volume ÷ Shares Outstanding. Shows what % of the entire float changed hands today. High turnover means tons of interest and liquidity."
>
<div class="metric-label">
<span>% Turnover</span>
<span class="metric-tag">Heat</span>
</div>
<div class="metric-mini">How much of the float traded.</div>
</div>
<div
class="metric"
data-description="(Day’s high − day’s low) relative to yesterday’s close. High % range = wild day; low % range = calm day."
>
<div class="metric-label">
<span>% Range</span>
<span class="metric-tag">Vol</span>
</div>
<div class="metric-mini">How far price travelled today.</div>
</div>
<div
class="metric"
data-description="Yesterday’s closing price. Used as the reference for today’s % change."
>
<div class="metric-label">
<span>Prev Close</span>
<span class="metric-tag">Anchor</span>
</div>
<div class="metric-mini">Price at yesterday’s close.</div>
</div>
<div
class="metric"
data-description="First price of today’s session. Open vs Last shows if the day closed strong or weak."
>
<div class="metric-label">
<span>Open</span>
<span class="metric-tag">Start</span>
</div>
<div class="metric-mini">First trade of the day.</div>
</div>
<div
class="metric"
data-description="Highest and lowest price reached during the day. Last vs High/Low tells you where in today’s range the stock is finishing."
>
<div class="metric-label">
<span>High / Low</span>
<span class="metric-tag">Range</span>
</div>
<div class="metric-mini">Today’s extremes.</div>
</div>
<div
class="metric"
data-description="Best bid is the highest price buyers will pay. Best ask is the lowest price sellers will take. The spread between them is friction when you enter/exit."
>
<div class="metric-label">
<span>Bid / Ask</span>
<span class="metric-tag">Spread</span>
</div>
<div class="metric-mini">Live auction prices.</div>
</div>
<div
class="metric"
data-description="Last traded price including premarket or after-hours. Shows where the stock is drifting when the main session is closed."
>
<div class="metric-label">
<span>Last w/ Ext</span>
<span class="metric-tag">24h feel</span>
</div>
<div class="metric-mini">Price including extended hours.</div>
</div>
<div
class="metric"
data-description="Which stock exchange you’re dealing with (NYSE, NASDAQ, etc.). Helpful when filtering for quality vs sketchy OTC listings."
>
<div class="metric-label">
<span>Exchange</span>
<span class="metric-tag">Venue</span>
</div>
<div class="metric-mini">Where it trades.</div>
</div>
</div>
<!-- Fake watchlist demo -->
<div class="watchlist-demo" style="margin-top:14px;">
<div class="wl-header">
<div>Symbol</div>
<div>Name</div>
<div>Last</div>
<div>% Change</div>
<div>Volume</div>
<div>% Turnover</div>
</div>
<div class="wl-row">
<div>SMR</div>
<div>Nuclear Co (demo)</div>
<div><span class="green">21.40</span></div>
<div><span class="green">+14.3%</span></div>
<div>18.2M</div>
<div>26.4%</div>
</div>
<div class="wl-row">
<div>SOUN</div>
<div>AI Voice Labs (demo)</div>
<div><span class="green">6.82</span></div>
<div><span class="green">+8.9%</span></div>
<div>9.7M</div>
<div>11.2%</div>
</div>
<div class="wl-row">
<div>TNXP</div>
<div>Bio Spec (demo)</div>
<div><span class="red">1.35</span></div>
<div><span class="red">-9.1%</span></div>
<div>3.1M</div>
<div>7.9%</div>
</div>
</div>
<!-- Playbook -->
<div class="playbook">
<h2>How It All Connects – Spotting Setups</h2>
<div class="playbook-grid">
<div class="play-card">
<div class="play-tag">Playbook 1</div>
<h3>Hot & Liquid Momentum</h3>
<ul>
<li><strong>% Change</strong> ≥ +4–7% (already moving).</li>
<li><strong>Volume</strong> ≥ average volume (RVOL > 2×).</li>
<li><strong>% Turnover</strong> ≥ 3–10% (float is churning).</li>
<li><strong>% Range</strong> high, and price near day’s high.</li>
<li>Spread (Bid/Ask) small so you can get in/out easily.</li>
</ul>
<div class="play-note">
Use this for nuclear / AI / quantum runners. You’re surfing
existing waves, not guessing bottoms.
</div>
</div>
<div class="play-card">
<div class="play-tag">Playbook 2</div>
<h3>Oversold Bounce</h3>
<ul>
<li><strong>% Change</strong> -5% to -15% on the day.</li>
<li><strong>RSI</strong> < 35 (oversold zone).</li>
<li>Still has okay <strong>Market Cap</strong> (not microtrash).</li>
<li>Volume decent so you’re not stuck in illiquid names.</li>
</ul>
<div class="play-note">
This is for “good company had a rough day” plays, not
for terminally broken charts.
</div>
</div>
<div class="play-card">
<div class="play-tag">Playbook 3</div>
<h3>Fundamental Core Watchlist</h3>
<ul>
<li><strong>Market Cap</strong> > ~2B (more stable).</li>
<li><strong>ROE</strong> & <strong>Net Margin</strong> positive and healthy.</li>
<li>Reasonable <strong>P/E</strong> (not insanely high).</li>
<li><strong>Analyst Rating</strong> in Buy/Strong Buy range.</li>
<li>Then time entries with <strong>RSI</strong>, <strong>MA</strong>, and support levels.</li>
</ul>
<div class="play-note">
These are your “real” AI / nuclear / robotics names to buy on
dips instead of random lotto tickets.
</div>
</div>
<div class="play-card">
<div class="play-tag">Mental Model</div>
<h3>Reading the Grid Fast</h3>
<ul>
<li>Start with <strong>% Change</strong> & <strong>sparkline</strong> – is it even moving?</li>
<li>Check <strong>Volume vs Avg Vol</strong> & <strong>% Turnover</strong> – is it in play?</li>
<li>Check <strong>Bid/Ask</strong> – can you exit without getting sliced by the spread?</li>
<li>Confirm theme via <strong>Name</strong>, <strong>Sector</strong>, and your own thesis.</li>
</ul>
<div class="play-note">
The table isn’t random numbers; it’s a heartbeat monitor for
each stock. You’re learning to read that heartbeat.
</div>
</div>
</div>
</div>
</div>
<!-- RIGHT: SCREENERS & TECH/FUNDAMENTAL TERMS -->
<div class="side-stack">
<div class="mini-card">
<div class="mini-title">Screener – Market Filters</div>
<div class="pill-row">
<span
class="pill hot metric"
data-description="Region or country the stock trades in. Useful for focusing on U.S. names or specific markets."
>Region</span
>
<span
class="pill metric"
data-description="Groups companies by what they do (Tech, Energy, Healthcare, etc.). Helps you build AI, nuclear, biotech watchlists."
>Sector</span
>
<span
class="pill metric"
data-description="Exchange where the stock is listed (NASDAQ, NYSE). Higher-quality names avoid grey-market OTC exchanges."
>Exchange</span
>
<span
class="pill metric"
data-description="Date the stock started trading. Very recent listings can be volatile with less price history."
>Listing Date</span
>
<span
class="pill metric"
data-description="Shares that can actually trade in the public market. Lower free float means price can move harder when volume surges."
>Free Float</span
>
</div>
</div>
<div class="mini-card">
<div class="mini-title">Financial Strength</div>
<div class="pill-row">
<span
class="pill hot metric"
data-description="Return on Equity: profit generated relative to shareholder equity. Higher ROE (with real earnings) usually means a more efficient business."
>ROE</span
>
<span
class="pill metric"
data-description="Return on Assets: profit divided by total assets. Shows how effectively a company uses everything it owns."
>ROA</span
>
<span
class="pill metric"
data-description="Earnings per Share: how much profit belongs to each share. Growing EPS over time is a good sign."
>EPS</span
>
<span
class="pill metric"
data-description="Net income divided by revenue. Higher net margin means more money kept from each dollar of sales."
>Net Margin</span
>
<span
class="pill metric"
data-description="How much debt the company carries versus its assets. Lower is generally safer."
>Debt to Asset</span
>
<span
class="pill metric"
data-description="Price-to-Earnings ratio using trailing 12 months. Shows how expensive the stock is relative to its earnings."
>P/E (TTM)</span
>
<span
class="pill metric"
data-description="Total money the company brings in from sales. Rapidly growing revenue is often what powers growth stories."
>Total Revenue</span
>
<span
class="pill metric"
data-description="Cash returned to shareholders. For growth trades you may not care; for long-term holds it matters more."
>Dividend Yield</span
>
<span
class="pill metric"
data-description="Wall Street consensus rating (Strong Buy, Buy, Hold, etc.). Not a guarantee, but a quick sanity check."
>Analyst Rating</span
>
</div>
</div>
<div class="mini-card">
<div class="mini-title">Technical Signals</div>
<div class="pill-row">
<span
class="pill hot metric"
data-description="Relative Strength Index. <30 is oversold, >70 overbought. Around 50 is neutral. You used this for bounce vs breakout logic."
>RSI</span
>
<span
class="pill metric"
data-description="Simple Moving Average. Smooths price over a fixed period (20-day, 50-day, etc.) and acts as dynamic support or resistance."
>MA</span
>
<span
class="pill metric"
data-description="Exponential Moving Average. Similar to MA but weights recent price more heavily—more responsive to changes."
>EMA</span
>
<span
class="pill metric"
data-description="Auto-generated hints from the platform combining multiple indicators. Good as a nudge, not something to follow blindly."
>Technical Signals</span
>
<span
class="pill metric"
data-description="Recognizable chart structures like triangles, flags, head & shoulders. Used for breakout and reversal setups."
>Classic Pattern</span
>
<span
class="pill metric"
data-description="Patterns made from candle shapes (dojis, hammers, engulfing bars). Short-term clues about buyer vs seller pressure."
>Candlestick Pattern</span
>
</div>
</div>
<div class="mini-card">
<div class="mini-title">Trading Logistics</div>
<div class="pill-row">
<span
class="pill metric"
data-description="Whether you can borrow against the position using margin. More leverage, but also more risk."
>Margin Available</span
>
<span
class="pill metric"
data-description="Ability to buy less than 1 share. Lets you size into expensive names like NVDA with small accounts."
>Fractional Shares</span
>
<span
class="pill metric"
data-description="Pink-sheet/OTC stocks can be very illiquid and volatile. Many screeners let you hide these if you want cleaner names."
>Tradable OTC</span
>
</div>
<p style="margin-top:8px;font-size:10px;color:var(--text-soft);line-height:1.4;">
All these filters combine with the watchlist columns: you filter the
universe down (Region, Sector, Market Cap, ROE, RSI), then drill
into the live grid (Price, % Change, Volume, Turnover) to pick
actual trades.
</p>
</div>
</div>
</div>
</div>
</body>
</html>