Add equities tape to UI
This commit is contained in:
dirtydishes
parent
c30429161c
commit
053e8e6cea
3 changed files with 190 additions and 75 deletions
|
|
@ -67,6 +67,33 @@ h1 {
|
|||
color: #4e3e25;
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--panel-border);
|
||||
background: #fffdf7;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28em;
|
||||
color: #6f5b39;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
.status {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
|
@ -77,6 +104,11 @@ h1 {
|
|||
min-width: 220px;
|
||||
}
|
||||
|
||||
.status-compact {
|
||||
padding: 12px 16px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -130,17 +162,6 @@ h1 {
|
|||
color: #5b4c34;
|
||||
}
|
||||
|
||||
.badge {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 0.65rem;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
background: rgba(47, 109, 79, 0.08);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
|
|
@ -172,6 +193,23 @@ h1 {
|
|||
color: #5b4c34;
|
||||
}
|
||||
|
||||
.flag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border: 1px solid rgba(47, 109, 79, 0.4);
|
||||
color: #2f6d4f;
|
||||
background: rgba(47, 109, 79, 0.12);
|
||||
}
|
||||
|
||||
.flag-muted {
|
||||
border-color: rgba(111, 91, 57, 0.4);
|
||||
color: #6f5b39;
|
||||
background: rgba(111, 91, 57, 0.12);
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 0.85rem;
|
||||
color: #6f5b39;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,33 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { OptionPrint } from "@islandflow/types";
|
||||
import type { EquityPrint, OptionPrint } from "@islandflow/types";
|
||||
|
||||
const MAX_ITEMS = 60;
|
||||
const LOCAL_HOSTS = new Set(["localhost", "127.0.0.1"]);
|
||||
|
||||
type WsStatus = "connecting" | "connected" | "disconnected";
|
||||
|
||||
type OptionMessage = {
|
||||
type: "option-print";
|
||||
payload: OptionPrint;
|
||||
type MessageType = "option-print" | "equity-print";
|
||||
|
||||
type StreamMessage<T> = {
|
||||
type: MessageType;
|
||||
payload: T;
|
||||
};
|
||||
|
||||
const buildWsUrl = (): string => {
|
||||
type TapeState<T> = {
|
||||
status: WsStatus;
|
||||
items: T[];
|
||||
lastUpdate: number | null;
|
||||
};
|
||||
|
||||
const buildWsUrl = (path: string): string => {
|
||||
const envBase = process.env.NEXT_PUBLIC_API_URL;
|
||||
|
||||
if (envBase) {
|
||||
const url = new URL(envBase);
|
||||
url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
|
||||
url.pathname = "/ws/options";
|
||||
url.pathname = path;
|
||||
url.search = "";
|
||||
url.hash = "";
|
||||
return url.toString();
|
||||
|
|
@ -30,7 +38,7 @@ const buildWsUrl = (): string => {
|
|||
const isLocal = LOCAL_HOSTS.has(hostname);
|
||||
const host = isLocal ? `${hostname}:4000` : window.location.host;
|
||||
|
||||
return `${wsProtocol}://${host}/ws/options`;
|
||||
return `${wsProtocol}://${host}${path}`;
|
||||
};
|
||||
|
||||
const formatPrice = (price: number): string => {
|
||||
|
|
@ -45,25 +53,25 @@ const formatTime = (ts: number): string => {
|
|||
return new Date(ts).toLocaleTimeString();
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
const statusLabel = (status: WsStatus): string => {
|
||||
switch (status) {
|
||||
case "connected":
|
||||
return "Live";
|
||||
case "connecting":
|
||||
return "Connecting";
|
||||
case "disconnected":
|
||||
default:
|
||||
return "Disconnected";
|
||||
}
|
||||
};
|
||||
|
||||
const useTape = <T,>(path: string, expectedType: MessageType): TapeState<T> => {
|
||||
const [status, setStatus] = useState<WsStatus>("connecting");
|
||||
const [prints, setPrints] = useState<OptionPrint[]>([]);
|
||||
const [items, setItems] = useState<T[]>([]);
|
||||
const [lastUpdate, setLastUpdate] = useState<number | null>(null);
|
||||
const reconnectRef = useRef<number | null>(null);
|
||||
const socketRef = useRef<WebSocket | null>(null);
|
||||
|
||||
const statusLabel = useMemo(() => {
|
||||
switch (status) {
|
||||
case "connected":
|
||||
return "Live";
|
||||
case "connecting":
|
||||
return "Connecting";
|
||||
case "disconnected":
|
||||
default:
|
||||
return "Disconnected";
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
|
||||
|
|
@ -74,7 +82,7 @@ export default function HomePage() {
|
|||
|
||||
setStatus("connecting");
|
||||
|
||||
const socket = new WebSocket(buildWsUrl());
|
||||
const socket = new WebSocket(buildWsUrl(path));
|
||||
socketRef.current = socket;
|
||||
|
||||
socket.onopen = () => {
|
||||
|
|
@ -90,12 +98,12 @@ export default function HomePage() {
|
|||
}
|
||||
|
||||
try {
|
||||
const message = JSON.parse(event.data) as OptionMessage;
|
||||
if (message.type !== "option-print") {
|
||||
const message = JSON.parse(event.data) as StreamMessage<T>;
|
||||
if (!message || message.type !== expectedType) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPrints((prev) => {
|
||||
setItems((prev) => {
|
||||
const next = [message.payload, ...prev];
|
||||
return next.slice(0, MAX_ITEMS);
|
||||
});
|
||||
|
|
@ -137,7 +145,39 @@ export default function HomePage() {
|
|||
socketRef.current.close();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
}, [path, expectedType]);
|
||||
|
||||
return { status, items, lastUpdate };
|
||||
};
|
||||
|
||||
type TapeStatusProps = {
|
||||
status: WsStatus;
|
||||
lastUpdate: number | null;
|
||||
};
|
||||
|
||||
const TapeStatus = ({ status, lastUpdate }: TapeStatusProps) => {
|
||||
return (
|
||||
<div className={`status status-${status} status-compact`}>
|
||||
<span className="status-dot" />
|
||||
<span>{statusLabel(status)}</span>
|
||||
{lastUpdate ? (
|
||||
<span className="timestamp">Updated {formatTime(lastUpdate)}</span>
|
||||
) : (
|
||||
<span className="timestamp">Waiting for data</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
const options = useTape<OptionPrint>("/ws/options", "option-print");
|
||||
const equities = useTape<EquityPrint>("/ws/equities", "equity-print");
|
||||
|
||||
const lastSeen = useMemo(() => {
|
||||
return [options.lastUpdate, equities.lastUpdate]
|
||||
.filter((value): value is number => value !== null)
|
||||
.sort((a, b) => b - a)[0] ?? null;
|
||||
}, [options.lastUpdate, equities.lastUpdate]);
|
||||
|
||||
return (
|
||||
<main className="dashboard">
|
||||
|
|
@ -145,51 +185,87 @@ export default function HomePage() {
|
|||
<div>
|
||||
<p className="eyebrow">Realtime flow workspace</p>
|
||||
<h1>Islandflow</h1>
|
||||
<p className="subtitle">Live option prints streaming from /ws/options.</p>
|
||||
<p className="subtitle">
|
||||
Options + equities streaming over WebSocket from the local API gateway.
|
||||
</p>
|
||||
</div>
|
||||
<div className={`status status-${status}`}>
|
||||
<span className="status-dot" />
|
||||
<span>{statusLabel}</span>
|
||||
{lastUpdate ? (
|
||||
<span className="timestamp">Updated {formatTime(lastUpdate)}</span>
|
||||
) : (
|
||||
<span className="timestamp">Waiting for data</span>
|
||||
)}
|
||||
<div className="summary">
|
||||
<span className="summary-title">Last update</span>
|
||||
<span className="summary-value">
|
||||
{lastSeen ? formatTime(lastSeen) : "Waiting for data"}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="card">
|
||||
<div className="card-header">
|
||||
<div>
|
||||
<h2>Options Tape</h2>
|
||||
<p className="card-subtitle">Newest prints first (max {MAX_ITEMS}).</p>
|
||||
<div className="cards">
|
||||
<section className="card">
|
||||
<div className="card-header">
|
||||
<div>
|
||||
<h2>Options Tape</h2>
|
||||
<p className="card-subtitle">Newest prints first (max {MAX_ITEMS}).</p>
|
||||
</div>
|
||||
<TapeStatus status={options.status} lastUpdate={options.lastUpdate} />
|
||||
</div>
|
||||
<span className="badge">Live</span>
|
||||
</div>
|
||||
|
||||
<div className="list">
|
||||
{prints.length === 0 ? (
|
||||
<div className="empty">No prints yet. Start ingest-options to populate the tape.</div>
|
||||
) : (
|
||||
prints.map((print) => (
|
||||
<div className="row" key={`${print.trace_id}-${print.seq}`}>
|
||||
<div>
|
||||
<div className="contract">{print.option_contract_id}</div>
|
||||
<div className="meta">
|
||||
<span>${formatPrice(print.price)}</span>
|
||||
<span>{formatSize(print.size)}x</span>
|
||||
<span>{print.exchange}</span>
|
||||
{print.conditions?.length ? (
|
||||
<span>{print.conditions.join(", ")}</span>
|
||||
) : null}
|
||||
<div className="list">
|
||||
{options.items.length === 0 ? (
|
||||
<div className="empty">No option prints yet. Start ingest-options.</div>
|
||||
) : (
|
||||
options.items.map((print) => (
|
||||
<div className="row" key={`${print.trace_id}-${print.seq}`}>
|
||||
<div>
|
||||
<div className="contract">{print.option_contract_id}</div>
|
||||
<div className="meta">
|
||||
<span>${formatPrice(print.price)}</span>
|
||||
<span>{formatSize(print.size)}x</span>
|
||||
<span>{print.exchange}</span>
|
||||
{print.conditions?.length ? (
|
||||
<span>{print.conditions.join(", ")}</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="time">{formatTime(print.ts)}</div>
|
||||
</div>
|
||||
<div className="time">{formatTime(print.ts)}</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card">
|
||||
<div className="card-header">
|
||||
<div>
|
||||
<h2>Equities Tape</h2>
|
||||
<p className="card-subtitle">Off-exchange flag highlighted.</p>
|
||||
</div>
|
||||
<TapeStatus status={equities.status} lastUpdate={equities.lastUpdate} />
|
||||
</div>
|
||||
|
||||
<div className="list">
|
||||
{equities.items.length === 0 ? (
|
||||
<div className="empty">No equity prints yet. Start ingest-equities.</div>
|
||||
) : (
|
||||
equities.items.map((print) => (
|
||||
<div className="row" key={`${print.trace_id}-${print.seq}`}>
|
||||
<div>
|
||||
<div className="contract">{print.underlying_id}</div>
|
||||
<div className="meta">
|
||||
<span>${formatPrice(print.price)}</span>
|
||||
<span>{formatSize(print.size)}x</span>
|
||||
<span>{print.exchange}</span>
|
||||
{print.offExchangeFlag ? (
|
||||
<span className="flag">Off-Ex</span>
|
||||
) : (
|
||||
<span className="flag flag-muted">Lit</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="time">{formatTime(print.ts)}</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue