Overview: focus|radar pairing, selectable radar, performance chart
Layout regrouped by relationship, not size: the setup-in-focus card and the radar sit side by side (they are one decision surface), the four account ribbons move directly above the open positions they describe, and a new performance chart closes the page. - Radar rows are selectable: clicking one swaps the focus card to that setup - including below-gate rows, whose card shows a muted "rank N / below gate" badge and the disqualify reason in the footer, with a "back to top pick" reset. The row currently in focus is highlighted; ticker links still deep-link without selecting. - Performance chart (the mockup's missing piece): new GET /paper-trades/equity-curve computes, per benchmark trading day since the first paper trade, the book's cumulative P&L (realized + mark-to-market from stored OHLCV) vs the same cost basis riding SPY over each trade's window (benchmark_prices). Pure curve math in paper_trade_service with unit tests; hidden until there are 2+ points of data. Frontend renders both lines with crosshair readout, zero baseline, and direct end labels. Backend unit suite: 501 passed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -28,6 +28,16 @@ export function createPaperTrade(body: CreatePaperTradeBody) {
|
||||
return apiClient.post<PaperTrade>('paper-trades', body).then((r) => r.data);
|
||||
}
|
||||
|
||||
export interface EquityPoint {
|
||||
date: string;
|
||||
book_pnl: number;
|
||||
benchmark_pnl: number;
|
||||
}
|
||||
|
||||
export function getEquityCurve() {
|
||||
return apiClient.get<EquityPoint[]>('paper-trades/equity-curve').then((r) => r.data);
|
||||
}
|
||||
|
||||
export function closePaperTrade(id: number, closePrice?: number) {
|
||||
return apiClient
|
||||
.post<{ id: number; status: string }>(`paper-trades/${id}/close`, {
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useMemo, useRef, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getEquityCurve } from '../../api/paperTrades';
|
||||
import { Section } from '../ui/Section';
|
||||
|
||||
const W = 760;
|
||||
const H = 220;
|
||||
const PAD = { top: 14, right: 84, bottom: 26, left: 56 };
|
||||
|
||||
function money(v: number): string {
|
||||
const sign = v > 0 ? '+' : v < 0 ? '−' : '';
|
||||
const abs = Math.abs(v);
|
||||
return `${sign}$${abs >= 10000 ? `${(abs / 1000).toFixed(1)}k` : abs.toFixed(0)}`;
|
||||
}
|
||||
|
||||
/** Round tick steps to a clean 1/2/5 x 10^n ladder. */
|
||||
function niceTicks(lo: number, hi: number, count = 4): number[] {
|
||||
const span = hi - lo || 1;
|
||||
const raw = span / count;
|
||||
const mag = 10 ** Math.floor(Math.log10(raw));
|
||||
const step = [1, 2, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? raw;
|
||||
const start = Math.ceil(lo / step) * step;
|
||||
const out: number[] = [];
|
||||
for (let v = start; v <= hi; v += step) out.push(v);
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Paper book vs the same dollars riding SPY — cumulative P&L since first trade. */
|
||||
export function PerfChart() {
|
||||
const curve = useQuery({ queryKey: ['paper-trades', 'equity-curve'], queryFn: getEquityCurve });
|
||||
const [hover, setHover] = useState<number | null>(null);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
|
||||
const data = curve.data ?? [];
|
||||
|
||||
const geom = useMemo(() => {
|
||||
if (data.length < 2) return null;
|
||||
const values = data.flatMap((p) => [p.book_pnl, p.benchmark_pnl, 0]);
|
||||
const lo = Math.min(...values);
|
||||
const hi = Math.max(...values);
|
||||
const pad = (hi - lo) * 0.08 || 1;
|
||||
const yLo = lo - pad;
|
||||
const yHi = hi + pad;
|
||||
const plotW = W - PAD.left - PAD.right;
|
||||
const plotH = H - PAD.top - PAD.bottom;
|
||||
const px = (i: number) => PAD.left + (i / (data.length - 1)) * plotW;
|
||||
const py = (v: number) => PAD.top + plotH - ((v - yLo) / (yHi - yLo)) * plotH;
|
||||
const line = (key: 'book_pnl' | 'benchmark_pnl') =>
|
||||
data.map((p, i) => `${i === 0 ? 'M' : 'L'}${px(i).toFixed(1)},${py(p[key]).toFixed(1)}`).join(' ');
|
||||
// Month boundaries for the x axis.
|
||||
const xTicks: { i: number; label: string }[] = [];
|
||||
let lastMonth = '';
|
||||
data.forEach((p, i) => {
|
||||
const m = p.date.slice(0, 7);
|
||||
if (m !== lastMonth) {
|
||||
lastMonth = m;
|
||||
xTicks.push({ i, label: new Date(`${p.date}T00:00:00`).toLocaleDateString('en-US', { month: 'short' }) });
|
||||
}
|
||||
});
|
||||
if (xTicks.length > 8) {
|
||||
const keep = Math.ceil(xTicks.length / 8);
|
||||
for (let k = xTicks.length - 1; k >= 0; k--) if (k % keep !== 0) xTicks.splice(k, 1);
|
||||
}
|
||||
return { yLo, yHi, plotH, px, py, line, yTicks: niceTicks(yLo, yHi), xTicks };
|
||||
}, [data]);
|
||||
|
||||
if (!geom) return null;
|
||||
const { px, py, line, yTicks, xTicks, plotH } = geom;
|
||||
|
||||
const onMove = (e: React.MouseEvent<SVGSVGElement>) => {
|
||||
const rect = svgRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
const x = ((e.clientX - rect.left) / rect.width) * W;
|
||||
const i = Math.round(((x - PAD.left) / (W - PAD.left - PAD.right)) * (data.length - 1));
|
||||
setHover(Math.max(0, Math.min(data.length - 1, i)));
|
||||
};
|
||||
|
||||
const last = data.length - 1;
|
||||
const hb = hover !== null ? data[hover] : null;
|
||||
const fmtDate = (iso: string) =>
|
||||
new Date(`${iso}T00:00:00`).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
||||
|
||||
return (
|
||||
<Section title="Performance" hint="paper book vs the same dollars in SPY · cumulative P&L">
|
||||
<div className="glass p-5 pb-2">
|
||||
<div className="flex justify-end gap-4 text-xs text-gray-400">
|
||||
<span><i className="mr-1.5 inline-block h-2 w-2 rounded-full align-middle" style={{ background: 'var(--up)' }} /> Book</span>
|
||||
<span><i className="mr-1.5 inline-block h-2 w-2 rounded-full align-middle" style={{ background: 'var(--ink-3)' }} /> Same $ in SPY</span>
|
||||
</div>
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={`0 0 ${W} ${H}`}
|
||||
className="mt-1 block h-auto w-full"
|
||||
onMouseMove={onMove}
|
||||
onMouseLeave={() => setHover(null)}
|
||||
role="img"
|
||||
aria-label={`Paper book cumulative P&L ${money(data[last].book_pnl)} versus ${money(data[last].benchmark_pnl)} for the same dollars in SPY`}
|
||||
>
|
||||
{yTicks.map((t) => (
|
||||
<g key={t}>
|
||||
<line x1={PAD.left} x2={W - PAD.right} y1={py(t)} y2={py(t)} stroke="var(--grid)" strokeWidth="1" />
|
||||
<text x={PAD.left - 8} y={py(t) + 3.5} textAnchor="end" className="num" fill="var(--ink-3)" fontSize="10">
|
||||
{money(t)}
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
{/* zero baseline slightly stronger when it's inside the plot */}
|
||||
<line x1={PAD.left} x2={W - PAD.right} y1={py(0)} y2={py(0)} stroke="var(--ink-3)" strokeWidth="1" opacity="0.5" />
|
||||
{xTicks.map(({ i, label }) => (
|
||||
<text key={`${label}-${i}`} x={px(i)} y={H - 6} textAnchor="middle" className="num" fill="var(--ink-3)" fontSize="10">
|
||||
{label}
|
||||
</text>
|
||||
))}
|
||||
<path d={line('benchmark_pnl')} fill="none" stroke="var(--ink-3)" strokeWidth="2" strokeLinejoin="round" />
|
||||
<path d={line('book_pnl')} fill="none" stroke="var(--up)" strokeWidth="2" strokeLinejoin="round" />
|
||||
{hover !== null && (
|
||||
<g>
|
||||
<line x1={px(hover)} x2={px(hover)} y1={PAD.top} y2={PAD.top + plotH} stroke="var(--ink-3)" strokeWidth="1" />
|
||||
<circle cx={px(hover)} cy={py(data[hover].book_pnl)} r="4.5" fill="var(--up)" stroke="var(--surface)" strokeWidth="2" />
|
||||
<circle cx={px(hover)} cy={py(data[hover].benchmark_pnl)} r="4.5" fill="var(--ink-3)" stroke="var(--surface)" strokeWidth="2" />
|
||||
</g>
|
||||
)}
|
||||
<circle cx={px(last)} cy={py(data[last].book_pnl)} r="4" fill="var(--up)" stroke="var(--surface)" strokeWidth="2" />
|
||||
<circle cx={px(last)} cy={py(data[last].benchmark_pnl)} r="4" fill="var(--ink-3)" stroke="var(--surface)" strokeWidth="2" />
|
||||
<text x={px(last) + 10} y={py(data[last].book_pnl) + 4} className="num" fill="var(--ink)" fontSize="11" fontWeight="600">
|
||||
{money(data[last].book_pnl)}
|
||||
</text>
|
||||
<text x={px(last) + 10} y={py(data[last].benchmark_pnl) + 4} className="num" fill="var(--ink-2)" fontSize="11">
|
||||
{money(data[last].benchmark_pnl)}
|
||||
</text>
|
||||
</svg>
|
||||
<p className="num px-1 pb-1 pt-1.5 text-[11px] text-gray-500" aria-live="polite">
|
||||
{hb
|
||||
? <>{fmtDate(hb.date)} — book <b className="text-gray-200">{money(hb.book_pnl)}</b> · SPY <b className="text-gray-200">{money(hb.benchmark_pnl)}</b></>
|
||||
: <>hover for daily values · realized + mark-to-market, since first paper trade</>}
|
||||
</p>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,7 @@ import { useTickerNames } from '../hooks/useTickers';
|
||||
import { Callout } from '../components/ui/Callout';
|
||||
import { Section } from '../components/ui/Section';
|
||||
import { OpenTradesPanel } from '../components/dashboard/OpenTradesPanel';
|
||||
import { PerfChart } from '../components/dashboard/PerfChart';
|
||||
import { PriceRail, RadarChart, radarAxesFromDimensions } from '../components/charts/horizon';
|
||||
import type { RadarAxis } from '../components/charts/horizon';
|
||||
import { SkeletonCard, SkeletonTable } from '../components/ui/Skeleton';
|
||||
@@ -67,21 +68,37 @@ interface RadarRow {
|
||||
reason: string | null;
|
||||
}
|
||||
|
||||
/** One radar row — compact enough for the half-width column. */
|
||||
function RadarSetupRow({ setup, rank, reason, name }: RadarRow & { name?: string }) {
|
||||
/** One radar row — compact enough for the half-width column; selecting it
|
||||
* swaps the focus card to this setup. */
|
||||
function RadarSetupRow({ setup, rank, reason, name, selected, onSelect }: RadarRow & {
|
||||
name?: string;
|
||||
selected?: boolean;
|
||||
onSelect?: () => void;
|
||||
}) {
|
||||
const qualified = reason === null;
|
||||
const prob = primaryTargetProbability(setup);
|
||||
return (
|
||||
<li
|
||||
className={`grid grid-cols-[20px_minmax(92px,116px)_44px_1fr_auto] items-center gap-2.5 px-2 py-2.5 ${
|
||||
qualified ? '' : 'opacity-60'
|
||||
}`}
|
||||
title={`R:R ${setup.rr_ratio.toFixed(1)}:1${prob != null ? ` · target prob ${Math.round(prob)}%` : ''}`}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-pressed={selected}
|
||||
onClick={onSelect}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onSelect?.();
|
||||
}
|
||||
}}
|
||||
className={`grid cursor-pointer grid-cols-[20px_minmax(92px,116px)_44px_1fr_auto] items-center gap-2.5 rounded-lg px-2 py-2.5 transition-colors ${
|
||||
selected ? 'bg-blue-400/[0.08]' : 'hover:bg-white/[0.03]'
|
||||
} ${qualified ? '' : 'opacity-60'}`}
|
||||
title={`R:R ${setup.rr_ratio.toFixed(1)}:1${prob != null ? ` · target prob ${Math.round(prob)}%` : ''} · click to focus`}
|
||||
>
|
||||
<span className="num text-[11px] text-gray-500">{rank}</span>
|
||||
<span className="min-w-0">
|
||||
<Link
|
||||
to={`/ticker/${setup.symbol}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="block font-medium text-blue-300 transition-colors hover:text-blue-200"
|
||||
>
|
||||
{setup.symbol}
|
||||
@@ -119,19 +136,27 @@ function convictionLabel(action: TradeSetup['recommended_action']): string {
|
||||
return '—';
|
||||
}
|
||||
|
||||
/** The one focal card: today's top qualified setup as a spatial price rail. */
|
||||
function FocusCard({ setup, name, gateNote }: {
|
||||
/** The focal card: a setup as a spatial price rail — the top pick by default,
|
||||
* or whichever radar row is selected. */
|
||||
function FocusCard({ setup, name, badge, badgeTone, footNote, onReset }: {
|
||||
setup: TradeSetup;
|
||||
name: string | undefined;
|
||||
gateNote: string;
|
||||
badge: string;
|
||||
badgeTone: 'ember' | 'muted';
|
||||
footNote: string;
|
||||
onReset?: () => void;
|
||||
}) {
|
||||
const prob = primaryTargetProbability(setup);
|
||||
return (
|
||||
<section className="glass p-6 sm:p-7" aria-label="Top qualified setup">
|
||||
<section className="glass p-6 sm:p-7" aria-label={`Setup in focus: ${setup.symbol}`}>
|
||||
<div className="flex flex-wrap items-start justify-between gap-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="num mt-2.5 whitespace-nowrap rounded-full border border-[#ff6a45]/40 px-2.5 py-1 text-[9.5px] font-semibold uppercase tracking-[0.2em] text-[#ff6a45]">
|
||||
top pick
|
||||
<span className={`num mt-2.5 whitespace-nowrap rounded-full border px-2.5 py-1 text-[9.5px] font-semibold uppercase tracking-[0.2em] ${
|
||||
badgeTone === 'ember'
|
||||
? 'border-[#ff6a45]/40 text-[#ff6a45]'
|
||||
: 'border-white/[0.15] text-gray-400'
|
||||
}`}>
|
||||
{badge}
|
||||
</span>
|
||||
<div>
|
||||
<div className="flex items-baseline gap-3">
|
||||
@@ -185,8 +210,16 @@ function FocusCard({ setup, name, gateNote }: {
|
||||
/>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center justify-between gap-4 border-t border-white/[0.06] pt-4">
|
||||
<span className="text-xs text-gray-500">cleared the gate · {gateNote}</span>
|
||||
<span className="flex gap-2.5">
|
||||
<span className="text-xs text-gray-500">{footNote}</span>
|
||||
<span className="flex items-center gap-2.5">
|
||||
{onReset && (
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="text-xs font-medium text-gray-400 transition-colors hover:text-gray-200"
|
||||
>
|
||||
← top pick
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
to={`/ticker/${setup.symbol}`}
|
||||
className="rounded-lg border border-blue-500/35 bg-blue-500/15 px-4 py-1.5 text-[13px] font-semibold text-blue-300 transition-colors hover:bg-blue-500/25"
|
||||
@@ -276,6 +309,9 @@ export default function DashboardPage() {
|
||||
// Default open when nothing qualifies — the near-misses ARE the content then.
|
||||
const showBelow = belowChoice ?? radar.qualified.length === 0;
|
||||
|
||||
// Radar selection swaps the focus card; null = the top pick.
|
||||
const [focusId, setFocusId] = useState<number | null>(null);
|
||||
|
||||
const topWatchlist = useMemo(
|
||||
() =>
|
||||
[...(watchlist.data ?? [])]
|
||||
@@ -318,6 +354,13 @@ export default function DashboardPage() {
|
||||
|
||||
const topPick = topSetups[0];
|
||||
|
||||
// What the focus card shows: the selected radar row, else the top pick.
|
||||
const focusRow = focusId != null
|
||||
? [...radar.qualified, ...radar.below].find((r) => r.setup.id === focusId) ?? null
|
||||
: null;
|
||||
const focusSetup = focusRow?.setup ?? topPick;
|
||||
const focusIsTop = focusRow == null || (topPick != null && focusRow.setup.id === topPick.id);
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-slide-up">
|
||||
{/* Hero — the verdict */}
|
||||
@@ -370,24 +413,129 @@ export default function DashboardPage() {
|
||||
)
|
||||
)}
|
||||
|
||||
{/* Focal setup */}
|
||||
{(trades.isLoading || activation.isLoading) && <SkeletonCard />}
|
||||
{trades.isError && <Callout variant="error">Failed to load setups</Callout>}
|
||||
{trades.data && activation.data && (
|
||||
topPick ? (
|
||||
<FocusCard
|
||||
setup={topPick}
|
||||
name={tickerNames.get(topPick.symbol.toUpperCase())}
|
||||
gateNote={activationSummary(activation.data)}
|
||||
/>
|
||||
) : (
|
||||
<Callout variant="empty">
|
||||
No qualified actionable setups right now — the radar below shows what's close and why it doesn't qualify.
|
||||
</Callout>
|
||||
)
|
||||
)}
|
||||
{/* Setup in focus | Radar — the decision pair */}
|
||||
<div className="grid items-start gap-8 xl:grid-cols-5">
|
||||
<div className="xl:col-span-3">
|
||||
{(trades.isLoading || activation.isLoading) && <SkeletonCard />}
|
||||
{trades.isError && <Callout variant="error">Failed to load setups</Callout>}
|
||||
{trades.data && activation.data && (
|
||||
focusSetup ? (
|
||||
<FocusCard
|
||||
setup={focusSetup}
|
||||
name={tickerNames.get(focusSetup.symbol.toUpperCase())}
|
||||
badge={
|
||||
focusIsTop
|
||||
? 'top pick'
|
||||
: focusRow && focusRow.reason === null
|
||||
? `rank ${focusRow.rank}`
|
||||
: `rank ${focusRow?.rank ?? '—'} · below gate`
|
||||
}
|
||||
badgeTone={focusIsTop ? 'ember' : 'muted'}
|
||||
footNote={
|
||||
focusRow && focusRow.reason !== null
|
||||
? `does not qualify: ${focusRow.reason}`
|
||||
: `cleared the gate · ${activationSummary(activation.data)}`
|
||||
}
|
||||
onReset={focusIsTop ? undefined : () => setFocusId(null)}
|
||||
/>
|
||||
) : (
|
||||
<Callout variant="empty">
|
||||
No qualified actionable setups right now — select a radar row to inspect what's close and why it doesn't qualify.
|
||||
</Callout>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Metric strip */}
|
||||
<div className="xl:col-span-2">
|
||||
<Section title="Radar" hint="ranked by strategy score · select a row to focus it">
|
||||
{trades.isLoading && <SkeletonTable rows={5} cols={5} />}
|
||||
{trades.data && radar.qualified.length === 0 && radar.below.length === 0 && (
|
||||
<Callout variant="empty">No live setups right now.</Callout>
|
||||
)}
|
||||
{(radar.qualified.length > 0 || radar.below.length > 0) && (
|
||||
<div className="glass px-4 py-2">
|
||||
{/* Qualified fingerprints — same axes, shapes compare at a glance */}
|
||||
{fingerprints.length > 0 && (
|
||||
<div className="flex flex-wrap items-end gap-4 border-b border-white/[0.06] px-2 pb-3 pt-1.5">
|
||||
{fingerprints.map((f) => (
|
||||
<figure key={f.symbol} className="text-center">
|
||||
<RadarChart axes={f.axes} size={82} labels={false} />
|
||||
<figcaption className="-mt-1">
|
||||
<Link to={`/ticker/${f.symbol}`} className="block text-[13px] font-semibold text-gray-200 hover:text-blue-200">
|
||||
{f.symbol}
|
||||
</Link>
|
||||
<span className={`num text-[9px] uppercase tracking-[0.14em] ${
|
||||
f.rank === 1 ? 'text-[#ff6a45]' : 'text-gray-500'
|
||||
}`}>
|
||||
{f.rank === 1 ? 'top pick' : `rank ${f.rank}`}
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
<p className="num mb-2 ml-auto max-w-[170px] text-right text-[10px] leading-relaxed text-gray-500">
|
||||
qualified fingerprints · hover a corner for scores
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Qualified rows — the actionable list */}
|
||||
{radar.qualified.length > 0 ? (
|
||||
<ul className="divide-y divide-white/[0.04]">
|
||||
{radar.qualified.map((row) => (
|
||||
<RadarSetupRow
|
||||
key={row.setup.id}
|
||||
{...row}
|
||||
name={tickerNames.get(row.setup.symbol.toUpperCase())}
|
||||
selected={focusSetup?.id === row.setup.id}
|
||||
onSelect={() => setFocusId(row.setup.id)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="px-2 py-2.5 text-xs text-gray-500">
|
||||
None clear the gate today — the closest candidates are below.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Below the gate, collapsed by default when there are qualified setups */}
|
||||
{radar.below.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setBelowChoice(!showBelow)}
|
||||
aria-expanded={showBelow}
|
||||
className="flex w-full items-center gap-2 border-t border-white/[0.06] px-2 py-2.5 text-left text-xs text-gray-500 transition-colors hover:text-gray-300"
|
||||
>
|
||||
<span className={`text-[9px] transition-transform ${showBelow ? 'rotate-90' : ''}`} aria-hidden="true">▶</span>
|
||||
{radar.below.length} below the gate — why each doesn't qualify
|
||||
</button>
|
||||
{showBelow && (
|
||||
<ul className="divide-y divide-white/[0.04] border-t border-white/[0.04]">
|
||||
{radar.below.map((row) => (
|
||||
<RadarSetupRow
|
||||
key={row.setup.id}
|
||||
{...row}
|
||||
name={tickerNames.get(row.setup.symbol.toUpperCase())}
|
||||
selected={focusSetup?.id === row.setup.id}
|
||||
onSelect={() => setFocusId(row.setup.id)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end border-t border-white/[0.04] px-2 py-2.5">
|
||||
<Link to="/signals" className="text-xs font-medium text-blue-300 transition-colors hover:text-blue-200">
|
||||
All setups →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metric strip — the account ribbons, right above the positions they describe */}
|
||||
{(trades.isLoading || openTrades.isLoading) ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<SkeletonCard /><SkeletonCard /><SkeletonCard /><SkeletonCard />
|
||||
@@ -428,85 +576,11 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Open positions | Radar — side by side like the mockup */}
|
||||
<div className="grid items-start gap-8 xl:grid-cols-2">
|
||||
<OpenTradesPanel />
|
||||
|
||||
<Section title="Radar" hint="ranked by strategy score">
|
||||
{trades.isLoading && <SkeletonTable rows={5} cols={5} />}
|
||||
{trades.data && radar.qualified.length === 0 && radar.below.length === 0 && (
|
||||
<Callout variant="empty">No live setups right now.</Callout>
|
||||
)}
|
||||
{(radar.qualified.length > 0 || radar.below.length > 0) && (
|
||||
<div className="glass px-4 py-2">
|
||||
{/* Qualified fingerprints — same axes, shapes compare at a glance */}
|
||||
{fingerprints.length > 0 && (
|
||||
<div className="flex flex-wrap items-end gap-4 border-b border-white/[0.06] px-2 pb-3 pt-1.5">
|
||||
{fingerprints.map((f) => (
|
||||
<figure key={f.symbol} className="text-center">
|
||||
<RadarChart axes={f.axes} size={82} labels={false} />
|
||||
<figcaption className="-mt-1">
|
||||
<Link to={`/ticker/${f.symbol}`} className="block text-[13px] font-semibold text-gray-200 hover:text-blue-200">
|
||||
{f.symbol}
|
||||
</Link>
|
||||
<span className={`num text-[9px] uppercase tracking-[0.14em] ${
|
||||
f.rank === 1 ? 'text-[#ff6a45]' : 'text-gray-500'
|
||||
}`}>
|
||||
{f.rank === 1 ? 'top pick' : `rank ${f.rank}`}
|
||||
</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
))}
|
||||
<p className="num mb-2 ml-auto max-w-[170px] text-right text-[10px] leading-relaxed text-gray-500">
|
||||
qualified fingerprints · hover a corner for scores
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Qualified rows — the actionable list */}
|
||||
{radar.qualified.length > 0 ? (
|
||||
<ul className="divide-y divide-white/[0.04]">
|
||||
{radar.qualified.map((row) => (
|
||||
<RadarSetupRow key={row.setup.id} {...row} name={tickerNames.get(row.setup.symbol.toUpperCase())} />
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="px-2 py-2.5 text-xs text-gray-500">
|
||||
None clear the gate today — the closest candidates are below.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Below the gate, collapsed by default when there are qualified setups */}
|
||||
{radar.below.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setBelowChoice(!showBelow)}
|
||||
aria-expanded={showBelow}
|
||||
className="flex w-full items-center gap-2 border-t border-white/[0.06] px-2 py-2.5 text-left text-xs text-gray-500 transition-colors hover:text-gray-300"
|
||||
>
|
||||
<span className={`text-[9px] transition-transform ${showBelow ? 'rotate-90' : ''}`} aria-hidden="true">▶</span>
|
||||
{radar.below.length} below the gate — why each doesn't qualify
|
||||
</button>
|
||||
{showBelow && (
|
||||
<ul className="divide-y divide-white/[0.04] border-t border-white/[0.04]">
|
||||
{radar.below.map((row) => (
|
||||
<RadarSetupRow key={row.setup.id} {...row} name={tickerNames.get(row.setup.symbol.toUpperCase())} />
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end border-t border-white/[0.04] px-2 py-2.5">
|
||||
<Link to="/signals" className="text-xs font-medium text-blue-300 transition-colors hover:text-blue-200">
|
||||
All setups →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
</div>
|
||||
{/* Open positions — full width, right under their ribbons */}
|
||||
<OpenTradesPanel />
|
||||
|
||||
{/* Performance — the paper book vs the same dollars in SPY */}
|
||||
<PerfChart />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/activation.ts","./src/api/admin.ts","./src/api/auth.ts","./src/api/client.ts","./src/api/fundamentals.ts","./src/api/health.ts","./src/api/indicators.ts","./src/api/ingestion.ts","./src/api/jobs.ts","./src/api/market.ts","./src/api/ohlcv.ts","./src/api/papertrades.ts","./src/api/performance.ts","./src/api/regime.ts","./src/api/scores.ts","./src/api/sentiment.ts","./src/api/sr-levels.ts","./src/api/tickers.ts","./src/api/trades.ts","./src/api/watchlist.ts","./src/components/admin/activationsettings.tsx","./src/components/admin/alertsettings.tsx","./src/components/admin/datacleanup.tsx","./src/components/admin/exitpolicysettings.tsx","./src/components/admin/jobcontrols.tsx","./src/components/admin/pipelinereadinesspanel.tsx","./src/components/admin/recommendationsettings.tsx","./src/components/admin/schedulesettings.tsx","./src/components/admin/sentimentprovidersettings.tsx","./src/components/admin/settingsform.tsx","./src/components/admin/tickermanagement.tsx","./src/components/admin/tickeruniversebootstrap.tsx","./src/components/admin/usertable.tsx","./src/components/auth/protectedroute.tsx","./src/components/charts/candlestickchart.tsx","./src/components/charts/horizon.tsx","./src/components/dashboard/opentradespanel.tsx","./src/components/layout/appshell.tsx","./src/components/layout/mobilenav.tsx","./src/components/layout/tickersearch.tsx","./src/components/layout/topbar.tsx","./src/components/rankings/rankingstable.tsx","./src/components/rankings/weightsform.tsx","./src/components/regime/regimequadrant.tsx","./src/components/regime/scorehistorychart.tsx","./src/components/scanner/tradetable.tsx","./src/components/signals/backtestpanel.tsx","./src/components/signals/mytradespanel.tsx","./src/components/signals/setupspanel.tsx","./src/components/signals/trackrecordpanel.tsx","./src/components/ticker/dimensionbreakdownpanel.tsx","./src/components/ticker/fundamentalspanel.tsx","./src/components/ticker/indicatorselector.tsx","./src/components/ticker/recommendationpanel.tsx","./src/components/ticker/sroverlay.tsx","./src/components/ticker/sentimentpanel.tsx","./src/components/ticker/standingmatrix.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/callout.tsx","./src/components/ui/confirmdialog.tsx","./src/components/ui/disclosure.tsx","./src/components/ui/dropdown.tsx","./src/components/ui/field.tsx","./src/components/ui/pageheader.tsx","./src/components/ui/scorecard.tsx","./src/components/ui/section.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/tabs.tsx","./src/components/ui/toast.tsx","./src/components/watchlist/addtickerform.tsx","./src/components/watchlist/watchlisttable.tsx","./src/hooks/useactivation.ts","./src/hooks/useadmin.ts","./src/hooks/useauth.ts","./src/hooks/usefetchsymboldata.ts","./src/hooks/usemarketregime.ts","./src/hooks/usepapertrades.ts","./src/hooks/useperformance.ts","./src/hooks/userisksettings.ts","./src/hooks/usescores.ts","./src/hooks/usetickerdetail.ts","./src/hooks/usetickers.ts","./src/hooks/usetrades.ts","./src/hooks/usewatchlist.ts","./src/lib/format.ts","./src/lib/ingestionstatus.ts","./src/lib/papertrade.ts","./src/lib/position.ts","./src/lib/qualification.ts","./src/lib/recommendation.ts","./src/lib/regime.ts","./src/lib/types.ts","./src/pages/adminpage.tsx","./src/pages/dashboardpage.tsx","./src/pages/designhorizonpage.tsx","./src/pages/designmockupspage.tsx","./src/pages/designorbitpage.tsx","./src/pages/loginpage.tsx","./src/pages/marketpage.tsx","./src/pages/regimepage.tsx","./src/pages/registerpage.tsx","./src/pages/signalspage.tsx","./src/pages/tickerdetailpage.tsx","./src/stores/authstore.ts"],"version":"5.6.3"}
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/activation.ts","./src/api/admin.ts","./src/api/auth.ts","./src/api/client.ts","./src/api/fundamentals.ts","./src/api/health.ts","./src/api/indicators.ts","./src/api/ingestion.ts","./src/api/jobs.ts","./src/api/market.ts","./src/api/ohlcv.ts","./src/api/papertrades.ts","./src/api/performance.ts","./src/api/regime.ts","./src/api/scores.ts","./src/api/sentiment.ts","./src/api/sr-levels.ts","./src/api/tickers.ts","./src/api/trades.ts","./src/api/watchlist.ts","./src/components/admin/activationsettings.tsx","./src/components/admin/alertsettings.tsx","./src/components/admin/datacleanup.tsx","./src/components/admin/exitpolicysettings.tsx","./src/components/admin/jobcontrols.tsx","./src/components/admin/pipelinereadinesspanel.tsx","./src/components/admin/recommendationsettings.tsx","./src/components/admin/schedulesettings.tsx","./src/components/admin/sentimentprovidersettings.tsx","./src/components/admin/settingsform.tsx","./src/components/admin/tickermanagement.tsx","./src/components/admin/tickeruniversebootstrap.tsx","./src/components/admin/usertable.tsx","./src/components/auth/protectedroute.tsx","./src/components/charts/candlestickchart.tsx","./src/components/charts/horizon.tsx","./src/components/dashboard/opentradespanel.tsx","./src/components/dashboard/perfchart.tsx","./src/components/layout/appshell.tsx","./src/components/layout/mobilenav.tsx","./src/components/layout/tickersearch.tsx","./src/components/layout/topbar.tsx","./src/components/rankings/rankingstable.tsx","./src/components/rankings/weightsform.tsx","./src/components/regime/regimequadrant.tsx","./src/components/regime/scorehistorychart.tsx","./src/components/scanner/tradetable.tsx","./src/components/signals/backtestpanel.tsx","./src/components/signals/mytradespanel.tsx","./src/components/signals/setupspanel.tsx","./src/components/signals/trackrecordpanel.tsx","./src/components/ticker/dimensionbreakdownpanel.tsx","./src/components/ticker/fundamentalspanel.tsx","./src/components/ticker/indicatorselector.tsx","./src/components/ticker/recommendationpanel.tsx","./src/components/ticker/sroverlay.tsx","./src/components/ticker/sentimentpanel.tsx","./src/components/ticker/standingmatrix.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/callout.tsx","./src/components/ui/confirmdialog.tsx","./src/components/ui/disclosure.tsx","./src/components/ui/dropdown.tsx","./src/components/ui/field.tsx","./src/components/ui/pageheader.tsx","./src/components/ui/scorecard.tsx","./src/components/ui/section.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/tabs.tsx","./src/components/ui/toast.tsx","./src/components/watchlist/addtickerform.tsx","./src/components/watchlist/watchlisttable.tsx","./src/hooks/useactivation.ts","./src/hooks/useadmin.ts","./src/hooks/useauth.ts","./src/hooks/usefetchsymboldata.ts","./src/hooks/usemarketregime.ts","./src/hooks/usepapertrades.ts","./src/hooks/useperformance.ts","./src/hooks/userisksettings.ts","./src/hooks/usescores.ts","./src/hooks/usetickerdetail.ts","./src/hooks/usetickers.ts","./src/hooks/usetrades.ts","./src/hooks/usewatchlist.ts","./src/lib/format.ts","./src/lib/ingestionstatus.ts","./src/lib/papertrade.ts","./src/lib/position.ts","./src/lib/qualification.ts","./src/lib/recommendation.ts","./src/lib/regime.ts","./src/lib/types.ts","./src/pages/adminpage.tsx","./src/pages/dashboardpage.tsx","./src/pages/designhorizonpage.tsx","./src/pages/designmockupspage.tsx","./src/pages/designorbitpage.tsx","./src/pages/loginpage.tsx","./src/pages/marketpage.tsx","./src/pages/regimepage.tsx","./src/pages/registerpage.tsx","./src/pages/signalspage.tsx","./src/pages/tickerdetailpage.tsx","./src/stores/authstore.ts"],"version":"5.6.3"}
|
||||
Reference in New Issue
Block a user