create ground-up frontend redesign mocks
This commit is contained in:
parent
0959105fbc
commit
83b0944cb3
4 changed files with 1275 additions and 884 deletions
|
|
@ -7,142 +7,171 @@ type DashboardMockProps = {
|
|||
variant: MockVariant;
|
||||
};
|
||||
|
||||
const variants: Record<
|
||||
MockVariant,
|
||||
{
|
||||
title: string;
|
||||
premise: string;
|
||||
mode: string;
|
||||
layout: string;
|
||||
}
|
||||
> = {
|
||||
type Concept = {
|
||||
title: string;
|
||||
shortName: string;
|
||||
premise: string;
|
||||
bestFor: string;
|
||||
layout: string;
|
||||
};
|
||||
|
||||
const concepts: Record<MockVariant, Concept> = {
|
||||
mock1: {
|
||||
title: "Command Deck",
|
||||
title: "Evidence Canvas",
|
||||
shortName: "Canvas",
|
||||
premise:
|
||||
"Closest to the reference: left navigation, ticker ribbon, dense evidence panes, replay rail.",
|
||||
mode: "Dense ops",
|
||||
layout: "classic"
|
||||
"A selected anomaly becomes the organizing object. Price, options, prints, news, and replay evidence attach around one decision path.",
|
||||
bestFor: "single-symbol investigation",
|
||||
layout: "canvas"
|
||||
},
|
||||
mock2: {
|
||||
title: "Investigation Stack",
|
||||
title: "Anomaly Queue",
|
||||
shortName: "Queue",
|
||||
premise:
|
||||
"A calmer analyst layout with the selected symbol story in the center and context wrapped around it.",
|
||||
mode: "Forensic",
|
||||
layout: "focus"
|
||||
"The terminal behaves like an alert operations room: ranked work enters from the left, evidence resolves in the center, and confidence checks stay pinned.",
|
||||
bestFor: "live triage under volume",
|
||||
layout: "queue"
|
||||
},
|
||||
mock3: {
|
||||
title: "Signal Wall",
|
||||
title: "Replay Room",
|
||||
shortName: "Replay",
|
||||
premise:
|
||||
"Prioritizes alert triage and cross-symbol scanning before a user drills into price action.",
|
||||
mode: "Triage",
|
||||
layout: "signals"
|
||||
"Historical sessions become inspectable rooms. The time spine leads, with every event and chart panel synchronized to the replay cursor.",
|
||||
bestFor: "after-action review",
|
||||
layout: "replay"
|
||||
},
|
||||
mock4: {
|
||||
title: "Replay Lab",
|
||||
title: "Market Atlas",
|
||||
shortName: "Atlas",
|
||||
premise:
|
||||
"A replay-first structure with timeline, event tape, and causality context always visible.",
|
||||
mode: "Replay",
|
||||
layout: "replay"
|
||||
"Symbols are mapped as related territories. Sector pressure, cross-asset flow, and event clusters reveal where attention is concentrating.",
|
||||
bestFor: "cross-market scanning",
|
||||
layout: "atlas"
|
||||
}
|
||||
};
|
||||
|
||||
const tickers = [
|
||||
["SPY", "529.18", "+0.23%", "up"],
|
||||
["QQQ", "452.47", "+0.31%", "up"],
|
||||
["AAPL", "194.88", "+1.22%", "up"],
|
||||
["NVDA", "120.19", "-0.41%", "down"],
|
||||
["TSLA", "180.72", "+0.72%", "up"],
|
||||
["AMZN", "186.31", "+0.35%", "up"],
|
||||
["IWM", "205.41", "+0.21%", "up"]
|
||||
const variantOrder: MockVariant[] = ["mock1", "mock2", "mock3", "mock4"];
|
||||
|
||||
const symbols = [
|
||||
{ symbol: "AAPL", price: "194.88", move: "+1.22%", direction: "up", score: 94, sector: "Mega cap tech" },
|
||||
{ symbol: "NVDA", price: "120.19", move: "-0.41%", direction: "down", score: 81, sector: "AI semis" },
|
||||
{ symbol: "TSLA", price: "180.72", move: "+0.72%", direction: "up", score: 76, sector: "EV complex" },
|
||||
{ symbol: "AMZN", price: "186.31", move: "+0.35%", direction: "up", score: 68, sector: "Consumer platform" },
|
||||
{ symbol: "IWM", price: "205.41", move: "+0.21%", direction: "up", score: 59, sector: "Small caps" }
|
||||
];
|
||||
|
||||
const anomalies = [
|
||||
{
|
||||
time: "09:41:10",
|
||||
symbol: "AAPL",
|
||||
title: "Dark sweep aligns with call pressure",
|
||||
value: "$4.32M",
|
||||
confidence: "High",
|
||||
direction: "Bullish",
|
||||
cause: "off-exchange prints led the options burst by 72s"
|
||||
},
|
||||
{
|
||||
time: "09:40:58",
|
||||
symbol: "NVDA",
|
||||
title: "Call wall absorbed at 120",
|
||||
value: "$2.01M",
|
||||
confidence: "Medium",
|
||||
direction: "Mixed",
|
||||
cause: "quote lift faded after the second split sweep"
|
||||
},
|
||||
{
|
||||
time: "09:39:47",
|
||||
symbol: "TSLA",
|
||||
title: "Momentum classifier fired",
|
||||
value: "91%",
|
||||
confidence: "High",
|
||||
direction: "Bullish",
|
||||
cause: "volume acceleration exceeded five-session baseline"
|
||||
},
|
||||
{
|
||||
time: "09:39:12",
|
||||
symbol: "AMZN",
|
||||
title: "Large block against tape",
|
||||
value: "$3.67M",
|
||||
confidence: "Watch",
|
||||
direction: "Bearish",
|
||||
cause: "print direction diverged from sector basket"
|
||||
}
|
||||
];
|
||||
|
||||
const evidence = [
|
||||
["Options", "195 C sweep", "$2.31M", "Bullish"],
|
||||
["Equity", "25,000 dark buy", "$4.87M", "Bullish"],
|
||||
["News", "AI update crossed", "09:40:21", "Info"],
|
||||
["Tape", "Momentum burst", "+1.22%", "Bullish"],
|
||||
["Venue", "Off-exchange share", "64%", "Watch"]
|
||||
];
|
||||
|
||||
const optionRows = [
|
||||
["2m", "AAPL", "May 17", "195 C", "5,240", "$2.31M", "Sweep", "Bullish"],
|
||||
["3m", "AAPL", "Jun 21", "200 C", "6,800", "$1.87M", "Block", "Bullish"],
|
||||
["4m", "NVDA", "May 24", "120 C", "9,150", "$2.01M", "Split", "Bullish"],
|
||||
["4m", "NVDA", "May 24", "120 C", "9,150", "$2.01M", "Split", "Mixed"],
|
||||
["5m", "TSLA", "Jul 19", "205 C", "10,000", "$3.45M", "Block", "Bullish"],
|
||||
["6m", "AMZN", "May 17", "185 P", "4,500", "$1.20M", "Sweep", "Bearish"],
|
||||
["7m", "IWM", "Jun 21", "207 C", "3,100", "$712K", "Sweep", "Bullish"],
|
||||
["8m", "AAPL", "May 24", "197.5 C", "7,600", "$2.01M", "Block", "Bullish"]
|
||||
["6m", "AMZN", "May 17", "185 P", "4,500", "$1.20M", "Sweep", "Bearish"]
|
||||
];
|
||||
|
||||
const signals = [
|
||||
["09:41:10", "Dark Flow Sweep", "AAPL", "$4.32M", "Bullish"],
|
||||
["09:40:58", "Unusual Options Activity", "NVDA", "$2.01M", "Bullish"],
|
||||
["09:40:21", "News Catalyst", "AAPL", "AI update", "News"],
|
||||
["09:39:47", "Classifier Hit: Momentum", "TSLA", "91%", "Bullish"],
|
||||
["09:39:12", "Large Block Trade", "AMZN", "$3.67M", "Bearish"]
|
||||
const health = [
|
||||
["OPRA", "healthy", "120ms"],
|
||||
["CBOE", "healthy", "85ms"],
|
||||
["NYSE", "degraded", "412ms"],
|
||||
["News", "healthy", "1.2s"]
|
||||
];
|
||||
|
||||
const feedHealth = [
|
||||
["OPRA Options", "Healthy", "120ms", "2,341"],
|
||||
["CBOE Quotes", "Healthy", "85ms", "1,987"],
|
||||
["Nasdaq TotalView", "Healthy", "92ms", "3,102"],
|
||||
["NYSE Pillar", "Degraded", "412ms", "932"],
|
||||
["News", "Healthy", "1.2s", "12"],
|
||||
["Dark Pool", "Healthy", "1.0s", "421"]
|
||||
const timeline = [
|
||||
["09:36", "Baseline drift", "AAPL and QQQ correlation widens"],
|
||||
["09:39", "First print", "Dark block appears before visible call lift"],
|
||||
["09:41", "Signal fired", "Sweep pressure confirms the print cluster"],
|
||||
["09:45", "Replay note", "Price accepted above prior liquidity shelf"]
|
||||
];
|
||||
|
||||
const darkFlow = [
|
||||
["09:41:05", "AAPL", "Buy", "25,000", "$4.87M", "Sweep"],
|
||||
["09:40:51", "AAPL", "Buy", "18,500", "$3.60M", "Sweep"],
|
||||
["09:40:35", "AAPL", "Sell", "30,000", "$5.84M", "Block"],
|
||||
["09:39:59", "AAPL", "Buy", "12,000", "$2.34M", "Sweep"],
|
||||
["09:38:47", "AAPL", "Sell", "21,000", "$4.09M", "Block"]
|
||||
const atlasGroups = [
|
||||
{ name: "Mega cap tech", heat: 92, flow: "+$8.4M", symbols: ["AAPL", "MSFT", "AMZN"], x: 12, y: 14 },
|
||||
{ name: "AI semis", heat: 81, flow: "+$5.1M", symbols: ["NVDA", "AMD", "AVGO"], x: 56, y: 22 },
|
||||
{ name: "Beta basket", heat: 66, flow: "+$3.8M", symbols: ["TSLA", "COIN", "PLTR"], x: 30, y: 58 },
|
||||
{ name: "Defensive", heat: 38, flow: "-$1.2M", symbols: ["XLU", "XLV", "PG"], x: 68, y: 64 }
|
||||
];
|
||||
|
||||
const variantOrder: MockVariant[] = ["mock1", "mock2", "mock3", "mock4"];
|
||||
|
||||
export function DashboardMock({ variant }: DashboardMockProps) {
|
||||
const config = variants[variant];
|
||||
const concept = concepts[variant];
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`mock-terminal mock-terminal-${config.layout}`}
|
||||
aria-labelledby="mock-title"
|
||||
>
|
||||
<MockHeader config={config} active={variant} />
|
||||
<TickerRail />
|
||||
{variant === "mock1" ? <ClassicLayout /> : null}
|
||||
{variant === "mock2" ? <FocusLayout /> : null}
|
||||
{variant === "mock3" ? <SignalLayout /> : null}
|
||||
{variant === "mock4" ? <ReplayLayout /> : null}
|
||||
</section>
|
||||
<main className={`mock-redesign mock-redesign-${concept.layout}`} aria-labelledby="mock-title">
|
||||
<MockHeader active={variant} concept={concept} />
|
||||
{variant === "mock1" ? <EvidenceCanvas /> : null}
|
||||
{variant === "mock2" ? <AnomalyQueue /> : null}
|
||||
{variant === "mock3" ? <ReplayRoom /> : null}
|
||||
{variant === "mock4" ? <MarketAtlas /> : null}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function MockHeader({
|
||||
config,
|
||||
active
|
||||
}: {
|
||||
config: (typeof variants)[MockVariant];
|
||||
active: MockVariant;
|
||||
}) {
|
||||
function MockHeader({ active, concept }: { active: MockVariant; concept: Concept }) {
|
||||
return (
|
||||
<header className="mock-header">
|
||||
<div className="mock-brand-lockup">
|
||||
<span className="mock-mark" aria-hidden="true" />
|
||||
<div>
|
||||
<span className="mock-brand">islandflow</span>
|
||||
<h1 id="mock-title">{config.title}</h1>
|
||||
</div>
|
||||
<header className="mock-redesign-header">
|
||||
<div className="mock-redesign-title">
|
||||
<span className="mock-redesign-product">islandflow concepts</span>
|
||||
<h1 id="mock-title">{concept.title}</h1>
|
||||
<p>{concept.premise}</p>
|
||||
</div>
|
||||
<p>{config.premise}</p>
|
||||
<div className="mock-header-tools">
|
||||
<span className="mock-live-dot">Live</span>
|
||||
<span className="mock-system">NATS 3ms / US-EAST-1</span>
|
||||
<span className="mock-clock">09:41:23 ET</span>
|
||||
<span className="mock-mode">{config.mode}</span>
|
||||
<div className="mock-redesign-meta" aria-label="Concept metadata">
|
||||
<span>best for: {concept.bestFor}</span>
|
||||
<span>09:41:23 ET</span>
|
||||
<span className="is-live">live data sketch</span>
|
||||
</div>
|
||||
<nav className="mock-switcher" aria-label="Mock variants">
|
||||
{variantOrder.map((item, index) => (
|
||||
<nav className="mock-redesign-switcher" aria-label="Mock variants">
|
||||
{variantOrder.map((item) => (
|
||||
<Link
|
||||
aria-current={item === active ? "page" : undefined}
|
||||
className={item === active ? "is-active" : ""}
|
||||
href={`/${item}`}
|
||||
key={item}
|
||||
>
|
||||
Mock {index + 1}
|
||||
{concepts[item].shortName}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
|
@ -150,131 +179,193 @@ function MockHeader({
|
|||
);
|
||||
}
|
||||
|
||||
function TickerRail() {
|
||||
function EvidenceCanvas() {
|
||||
return (
|
||||
<div className="mock-ticker-rail" aria-label="Live symbol ticker">
|
||||
<div className="mock-ticker-track">
|
||||
{[...tickers, ...tickers].map(([symbol, price, move, direction], index) => (
|
||||
<article className="mock-ticker-card" key={`${symbol}-${index}`}>
|
||||
<section className="mock-canvas-grid" aria-label="Evidence canvas concept">
|
||||
<div className="mock-symbol-strip">
|
||||
{symbols.map((item) => (
|
||||
<article className="mock-symbol-tile" key={item.symbol}>
|
||||
<div>
|
||||
<strong>{symbol}</strong>
|
||||
<span>{price}</span>
|
||||
<strong>{item.symbol}</strong>
|
||||
<span>{item.sector}</span>
|
||||
</div>
|
||||
<span className={`mock-move is-${direction}`}>{move}</span>
|
||||
<Sparkline direction={direction} />
|
||||
<ScoreDial score={item.score} />
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Panel className="mock-canvas-brief" label="active case">
|
||||
<div className="mock-case-heading">
|
||||
<span className="mock-case-symbol">AAPL</span>
|
||||
<div>
|
||||
<h2>Dark sweep pressure is confirmed by options lift</h2>
|
||||
<p>
|
||||
The interface treats one fired anomaly as a case file. Every pane answers whether the
|
||||
signal is meaningful, explainable, and worth continued attention.
|
||||
</p>
|
||||
</div>
|
||||
<span className="mock-confidence">94 confidence</span>
|
||||
</div>
|
||||
<EvidenceLinks />
|
||||
</Panel>
|
||||
<ChartPanel className="mock-canvas-chart" mode="annotated" />
|
||||
<FlowTape className="mock-canvas-tape" />
|
||||
<CausalityPanel className="mock-canvas-context" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ClassicLayout() {
|
||||
function AnomalyQueue() {
|
||||
return (
|
||||
<div className="mock-dashboard-grid mock-grid-classic">
|
||||
<OptionTape />
|
||||
<ChartPanel />
|
||||
<SignalPanel />
|
||||
<FeedHealth />
|
||||
<DarkFlow />
|
||||
<EventContext />
|
||||
<ReplayRail compact />
|
||||
</div>
|
||||
<section className="mock-queue-grid" aria-label="Anomaly queue concept">
|
||||
<Panel className="mock-queue-list" label="ranked work">
|
||||
{anomalies.map((item, index) => (
|
||||
<article className={index === 0 ? "mock-queue-item is-selected" : "mock-queue-item"} key={item.time}>
|
||||
<time>{item.time}</time>
|
||||
<div>
|
||||
<strong>{item.symbol}</strong>
|
||||
<span>{item.title}</span>
|
||||
</div>
|
||||
<Badge tone={item.direction}>{item.direction}</Badge>
|
||||
</article>
|
||||
))}
|
||||
</Panel>
|
||||
<Panel className="mock-queue-inspector" label="current anomaly">
|
||||
<div className="mock-inspector-header">
|
||||
<span>AAPL</span>
|
||||
<h2>Dark sweep aligns with call pressure</h2>
|
||||
<p>Off-exchange prints led the options burst by 72 seconds. The next decision is whether the move is being accepted above the liquidity shelf.</p>
|
||||
</div>
|
||||
<EvidenceLinks compact />
|
||||
<ChartPanel mode="compressed" />
|
||||
</Panel>
|
||||
<Panel className="mock-queue-checks" label="confidence checks">
|
||||
<CheckList />
|
||||
<FeedHealth />
|
||||
</Panel>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FocusLayout() {
|
||||
function ReplayRoom() {
|
||||
return (
|
||||
<div className="mock-dashboard-grid mock-grid-focus">
|
||||
<SymbolBrief />
|
||||
<ChartPanel />
|
||||
<EventContext />
|
||||
<OptionTape condensed />
|
||||
<SignalPanel />
|
||||
<DarkFlow />
|
||||
</div>
|
||||
<section className="mock-replay-grid" aria-label="Replay room concept">
|
||||
<Panel className="mock-replay-stage" label="session replay">
|
||||
<div className="mock-replay-hero">
|
||||
<div>
|
||||
<span>May 16, 2024</span>
|
||||
<h2>09:41:23, signal confirmation window</h2>
|
||||
</div>
|
||||
<div className="mock-replay-controls" aria-label="Replay controls">
|
||||
<button type="button">Back 30s</button>
|
||||
<button type="button">Pause replay</button>
|
||||
<button type="button">Forward 30s</button>
|
||||
<span>32x</span>
|
||||
</div>
|
||||
</div>
|
||||
<ReplayTrack />
|
||||
<ChartPanel mode="replay" />
|
||||
</Panel>
|
||||
<Panel className="mock-replay-spine" label="event spine">
|
||||
<ol className="mock-time-spine">
|
||||
{timeline.map(([time, title, detail]) => (
|
||||
<li key={time}>
|
||||
<time>{time}</time>
|
||||
<strong>{title}</strong>
|
||||
<span>{detail}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</Panel>
|
||||
<FlowTape className="mock-replay-tape" condensed />
|
||||
<CausalityPanel className="mock-replay-notes" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function SignalLayout() {
|
||||
function MarketAtlas() {
|
||||
return (
|
||||
<div className="mock-dashboard-grid mock-grid-signals">
|
||||
<SignalPanel hero />
|
||||
<OptionTape />
|
||||
<ChartPanel compact />
|
||||
<FeedHealth />
|
||||
<EventContext />
|
||||
</div>
|
||||
<section className="mock-atlas-grid" aria-label="Market atlas concept">
|
||||
<Panel className="mock-atlas-map" label="attention map">
|
||||
<div className="mock-atlas-field">
|
||||
{atlasGroups.map((group) => (
|
||||
<article
|
||||
className="mock-atlas-node"
|
||||
key={group.name}
|
||||
style={{ "--x": `${group.x}%`, "--y": `${group.y}%`, "--heat": group.heat } as CSSProperties}
|
||||
>
|
||||
<strong>{group.name}</strong>
|
||||
<span>{group.flow}</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel className="mock-atlas-symbols" label="cluster detail">
|
||||
{atlasGroups.map((group) => (
|
||||
<article className="mock-cluster-row" key={group.name}>
|
||||
<div>
|
||||
<strong>{group.name}</strong>
|
||||
<span>{group.symbols.join(" / ")}</span>
|
||||
</div>
|
||||
<ScoreDial score={group.heat} />
|
||||
</article>
|
||||
))}
|
||||
</Panel>
|
||||
<Panel className="mock-atlas-correlation" label="linked evidence">
|
||||
<EvidenceLinks compact />
|
||||
<FlowTape condensed />
|
||||
</Panel>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ReplayLayout() {
|
||||
function Panel({ className, label, children }: { className?: string; label: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="mock-dashboard-grid mock-grid-replay">
|
||||
<ReplayRail />
|
||||
<ChartPanel />
|
||||
<EventContext />
|
||||
<OptionTape condensed />
|
||||
<SignalPanel />
|
||||
<DarkFlow />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Panel({
|
||||
title,
|
||||
meta,
|
||||
className = "",
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
meta?: string;
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className={`mock-panel ${className}`} aria-label={title}>
|
||||
<div className="mock-panel-head">
|
||||
<h2>{title}</h2>
|
||||
{meta ? <span>{meta}</span> : null}
|
||||
</div>
|
||||
<section className={`mock-redesign-panel ${className ?? ""}`} aria-label={label}>
|
||||
<div className="mock-panel-label">{label}</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function OptionTape({ condensed = false }: { condensed?: boolean }) {
|
||||
const rows = condensed ? optionRows.slice(0, 5) : optionRows;
|
||||
function EvidenceLinks({ compact = false }: { compact?: boolean }) {
|
||||
return (
|
||||
<div className={compact ? "mock-evidence-list is-compact" : "mock-evidence-list"}>
|
||||
{evidence.map(([source, title, value, tone]) => (
|
||||
<article className="mock-evidence-card" key={`${source}-${title}`}>
|
||||
<span>{source}</span>
|
||||
<strong>{title}</strong>
|
||||
<div>
|
||||
<span>{value}</span>
|
||||
<Badge tone={tone}>{tone}</Badge>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FlowTape({ className = "", condensed = false }: { className?: string; condensed?: boolean }) {
|
||||
const rows = condensed ? optionRows.slice(0, 4) : optionRows;
|
||||
|
||||
return (
|
||||
<Panel title="Option Flow Tape" meta="250+ shown" className="mock-option-tape">
|
||||
<div className="mock-table mock-table-options">
|
||||
<div className="mock-table-row mock-table-head">
|
||||
<Panel className={`mock-flow-tape ${className}`} label="flow tape">
|
||||
<div className="mock-redesign-table">
|
||||
<div className="mock-redesign-row is-head">
|
||||
<span>Time</span>
|
||||
<span>Symbol</span>
|
||||
<span>Exp</span>
|
||||
<span>Strike</span>
|
||||
<span>Contract</span>
|
||||
<span>Size</span>
|
||||
<span>Prem</span>
|
||||
<span>Type</span>
|
||||
<span>Score</span>
|
||||
<span>Premium</span>
|
||||
<span>Read</span>
|
||||
</div>
|
||||
{rows.map((row) => (
|
||||
<div className="mock-table-row" key={`${row[0]}-${row[1]}-${row[3]}`}>
|
||||
{row.map((cell, index) => (
|
||||
<span
|
||||
className={
|
||||
index === 6
|
||||
? "mock-pill is-info"
|
||||
: index === 7
|
||||
? `mock-pill ${cell === "Bearish" ? "is-bearish" : "is-bullish"}`
|
||||
: ""
|
||||
}
|
||||
key={cell}
|
||||
>
|
||||
{cell}
|
||||
</span>
|
||||
))}
|
||||
{rows.map(([time, symbol, exp, strike, size, premium, type, read]) => (
|
||||
<div className="mock-redesign-row" key={`${time}-${symbol}-${strike}`}>
|
||||
<span>{time}</span>
|
||||
<strong>{symbol}</strong>
|
||||
<span>{exp} {strike}</span>
|
||||
<span>{size}</span>
|
||||
<span>{premium}</span>
|
||||
<Badge tone={read}>{type}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -282,32 +373,34 @@ function OptionTape({ condensed = false }: { condensed?: boolean }) {
|
|||
);
|
||||
}
|
||||
|
||||
function ChartPanel({ compact = false }: { compact?: boolean }) {
|
||||
function ChartPanel({ className = "", mode }: { className?: string; mode: "annotated" | "compressed" | "replay" }) {
|
||||
const count = mode === "compressed" ? 38 : 64;
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="AAPL | Price & Flow"
|
||||
meta="1m / 5m / 15m"
|
||||
className={compact ? "mock-chart is-compact" : "mock-chart"}
|
||||
>
|
||||
<div className="mock-chart-meta">
|
||||
<strong>194.88</strong>
|
||||
<span className="mock-move is-up">+2.34 (+1.22%)</span>
|
||||
<Panel className={`mock-redesign-chart ${className} is-${mode}`} label="price and flow">
|
||||
<div className="mock-chart-topline">
|
||||
<div>
|
||||
<span>AAPL</span>
|
||||
<strong>194.88</strong>
|
||||
</div>
|
||||
<Badge tone="Bullish">+1.22%</Badge>
|
||||
</div>
|
||||
<div className="mock-candle-field" aria-hidden="true">
|
||||
{Array.from({ length: 58 }).map((_, index) => (
|
||||
<div className="mock-chart-field" aria-hidden="true">
|
||||
{Array.from({ length: count }).map((_, index) => (
|
||||
<span
|
||||
className={index % 7 === 0 || index % 11 === 0 ? "is-red" : "is-green"}
|
||||
className={index % 8 === 0 || index % 13 === 0 ? "is-red" : "is-green"}
|
||||
key={index}
|
||||
style={{ "--height": `${18 + ((index * 17) % 62)}%` } as CSSProperties}
|
||||
style={{ "--height": `${18 + ((index * 19) % 66)}%` } as CSSProperties}
|
||||
/>
|
||||
))}
|
||||
<i className="mock-chart-marker" />
|
||||
</div>
|
||||
<div className="mock-volume-field" aria-hidden="true">
|
||||
{Array.from({ length: 42 }).map((_, index) => (
|
||||
<span
|
||||
className={index % 6 === 0 ? "is-red" : "is-green"}
|
||||
className={index % 7 === 0 ? "is-red" : "is-green"}
|
||||
key={index}
|
||||
style={{ "--height": `${14 + ((index * 23) % 68)}%` } as CSSProperties}
|
||||
style={{ "--height": `${14 + ((index * 23) % 70)}%` } as CSSProperties}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -315,177 +408,89 @@ function ChartPanel({ compact = false }: { compact?: boolean }) {
|
|||
);
|
||||
}
|
||||
|
||||
function SignalPanel({ hero = false }: { hero?: boolean }) {
|
||||
function CausalityPanel({ className = "" }: { className?: string }) {
|
||||
return (
|
||||
<Panel
|
||||
title="Signals & Alerts"
|
||||
meta="All / Signals / System"
|
||||
className={hero ? "mock-signals is-hero" : "mock-signals"}
|
||||
>
|
||||
<div className="mock-signal-list">
|
||||
{signals.map(([time, title, symbol, value, tag]) => (
|
||||
<article className="mock-signal-item" key={`${time}-${title}`}>
|
||||
<time>{time}</time>
|
||||
<div>
|
||||
<strong>{title}</strong>
|
||||
<span>
|
||||
{symbol} / {value}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`mock-pill ${tag === "Bearish" ? "is-bearish" : tag === "News" ? "is-news" : "is-bullish"}`}
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<Panel className={`mock-causality ${className}`} label="why it fired">
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Lead indicator</dt>
|
||||
<dd>Dark flow cluster</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Confirming evidence</dt>
|
||||
<dd>195 C sweep pressure</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Contradiction</dt>
|
||||
<dd>Venue concentration is high</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Next check</dt>
|
||||
<dd>Acceptance above 194.50</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
function FeedHealth() {
|
||||
return (
|
||||
<Panel title="Feed Health" meta="Live checks" className="mock-feed">
|
||||
<div className="mock-table mock-table-feed">
|
||||
{feedHealth.map(([feed, status, lag, rate]) => (
|
||||
<div className="mock-table-row" key={feed}>
|
||||
<span>{feed}</span>
|
||||
<span className={`mock-pill ${status === "Degraded" ? "is-warning" : "is-bullish"}`}>
|
||||
{status}
|
||||
</span>
|
||||
<span>{lag}</span>
|
||||
<span>{rate}/s</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
function DarkFlow() {
|
||||
return (
|
||||
<Panel title="Dark Flow" meta="Equity prints" className="mock-dark-flow">
|
||||
<div className="mock-table mock-table-dark">
|
||||
{darkFlow.map(([time, symbol, side, size, notional, type]) => (
|
||||
<div className="mock-table-row" key={`${time}-${side}-${size}`}>
|
||||
<span>{time}</span>
|
||||
<strong>{symbol}</strong>
|
||||
<span className={`mock-pill ${side === "Sell" ? "is-bearish" : "is-bullish"}`}>
|
||||
{side}
|
||||
</span>
|
||||
<span>{size}</span>
|
||||
<span>{notional}</span>
|
||||
<span>{type}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
function EventContext() {
|
||||
return (
|
||||
<Panel title="Event Context" meta="Window: 15m" className="mock-context">
|
||||
<div className="mock-event-layout">
|
||||
<ol className="mock-timeline">
|
||||
{signals.slice(0, 4).map(([time, title, symbol]) => (
|
||||
<li key={`${time}-${title}`}>
|
||||
<time>{time}</time>
|
||||
<strong>{title}</strong>
|
||||
<span>{symbol} evidence linked</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="mock-detail">
|
||||
<h3>Why it fired</h3>
|
||||
<dl>
|
||||
<div>
|
||||
<dt>Type</dt>
|
||||
<dd>Dark Flow Sweep</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Premium</dt>
|
||||
<dd>$4.32M</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Venue</dt>
|
||||
<dd>Off-exchange</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Tags</dt>
|
||||
<dd>Bullish / Sweep / Call</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div className="mock-feed-health">
|
||||
{health.map(([name, state, lag]) => (
|
||||
<div key={name}>
|
||||
<strong>{name}</strong>
|
||||
<Badge tone={state === "degraded" ? "Watch" : "Bullish"}>{state}</Badge>
|
||||
<span>{lag}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ReplayRail({ compact = false }: { compact?: boolean }) {
|
||||
function CheckList() {
|
||||
const checks = [
|
||||
["Source agreement", "4 of 5 linked sources agree"],
|
||||
["Staleness", "last event 11s ago"],
|
||||
["Replay match", "similar to Apr 26 open"],
|
||||
["Risk note", "off-exchange share elevated"]
|
||||
];
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="Replay"
|
||||
meta="May 16, 2024"
|
||||
className={compact ? "mock-replay is-compact" : "mock-replay"}
|
||||
>
|
||||
<div className="mock-replay-controls">
|
||||
<button type="button">Prev</button>
|
||||
<button type="button">Pause</button>
|
||||
<button type="button">Next</button>
|
||||
<span>32x</span>
|
||||
</div>
|
||||
<div className="mock-replay-track">
|
||||
<span className="mock-replay-window" />
|
||||
<span className="mock-replay-now" />
|
||||
</div>
|
||||
<div className="mock-replay-times">
|
||||
<span>09:00</span>
|
||||
<strong>09:41:23 / Live</strong>
|
||||
<span>10:15</span>
|
||||
</div>
|
||||
</Panel>
|
||||
<div className="mock-check-list">
|
||||
{checks.map(([label, value]) => (
|
||||
<div key={label}>
|
||||
<span>{label}</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SymbolBrief() {
|
||||
function ReplayTrack() {
|
||||
return (
|
||||
<Panel title="AAPL Evidence Brief" meta="Focused symbol" className="mock-symbol-brief">
|
||||
<div className="mock-brief-price">
|
||||
<strong>194.88</strong>
|
||||
<span className="mock-move is-up">+1.22%</span>
|
||||
<div className="mock-replay-track-redesign">
|
||||
<span>09:00</span>
|
||||
<div>
|
||||
<i />
|
||||
</div>
|
||||
<p>
|
||||
Dark sweep pressure aligns with short-window momentum and a fresh news catalyst. Context
|
||||
confidence is high, but the largest block remains off-exchange and should be checked against
|
||||
next print behavior.
|
||||
</p>
|
||||
<div className="mock-brief-tags">
|
||||
<span className="mock-pill is-bullish">Bullish</span>
|
||||
<span className="mock-pill is-info">Sweep</span>
|
||||
<span className="mock-pill is-news">News linked</span>
|
||||
</div>
|
||||
</Panel>
|
||||
<strong>09:41:23</strong>
|
||||
<span>10:15</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Sparkline({ direction }: { direction: string }) {
|
||||
function ScoreDial({ score }: { score: number }) {
|
||||
return (
|
||||
<svg
|
||||
className="mock-sparkline"
|
||||
viewBox="0 0 96 28"
|
||||
role="img"
|
||||
aria-label={`${direction} sparkline`}
|
||||
>
|
||||
<polyline
|
||||
fill="none"
|
||||
points={
|
||||
direction === "down"
|
||||
? "0,8 9,12 18,10 27,17 36,14 45,21 54,18 63,23 72,19 81,24 96,20"
|
||||
: "0,22 9,18 18,20 27,13 36,15 45,9 54,12 63,6 72,10 81,4 96,7"
|
||||
}
|
||||
/>
|
||||
</svg>
|
||||
<span className="mock-score-dial" style={{ "--score": score } as CSSProperties}>
|
||||
{score}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function Badge({ tone, children }: { tone: string; children: ReactNode }) {
|
||||
const normalized =
|
||||
tone === "Bearish" ? "bearish" : tone === "Watch" || tone === "Mixed" ? "watch" : tone === "Info" ? "info" : "bullish";
|
||||
|
||||
return <span className={`mock-badge is-${normalized}`}>{children}</span>;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue