MythEclipse/flowsight
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: FE solid-ui (shadcn port) — Tailwind + 14 components, all pages rewritten
CI / go test + web typecheck (push) Canceled after 0s
Details
CI / build + deploy (Nix) — flowsight (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
asepharyana committed 2026-09-15 17:40:39 +07:00
1 parent debc907188
commit 8392dbe724
34 files changed
+2390 -542
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/pages/Portfolio.tsx
+49 -39
View File
@@ -2,7 +2,10 @@ import { createResource, For, Show } from "solid-js";
import { api } from "../lib/api";
import { Bar } from "solid-chartjs";
import { Chart, registerables } from "chart.js";
import { StatCard, Skeleton } from "../components/ui";
import { PageHead } from "../components/ui";
import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
import { Skeleton } from "../components/ui/skeleton";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
Chart.register(...registerables);
export default function Portfolio() {
@@ -13,32 +16,40 @@ export default function Portfolio() {
datasets: [{ label: "Weight %", data: (risk()?.concentration || []).map((c) => +(c.weight * 100).toFixed(1)) }],
});
return (
<div>
<div class="fs-page-head"><h1>Portfolio Risk + Accuracy Ledger</h1><p class="fs-muted">Computed from your watchlist.</p></div>
<Show when={!risk.loading && !acc.loading} fallback={<Skeleton rows={4} />}>
<div class="fs-grid">
<div class="fs-card">
<h3>Concentration</h3>
<Show when={(risk()?.concentration || []).length} fallback={<p class="fs-muted">Add tickers to your watchlist to see concentration.</p>}>
<Bar data={chartData()} options={{ responsive: true }} />
</Show>
<For each={risk()?.warnings || []}>{(w) => <p>⚠️ {w}</p>}</For>
</div>
<StatCard title="Beta vs index" value={risk() ? String(risk()!.beta) : "…"}>
<h3 style={{ "margin-top": "12px" }}>Correlation heatmap</h3>
<CorrHeatmap matrix={risk()?.correlation || {}} />
</StatCard>
<div class="fs-card">
<h3>Agent accuracy</h3>
<table class="fs-table">
<thead><tr><th>Agent</th><th>Calls</th><th>Resolved</th><th>Hit %</th></tr></thead>
<tbody>
<For each={acc()?.agents || []}>
{(a) => <tr><td>{a.agent}</td><td>{a.calls}</td><td>{a.resolved}</td><td>{(a.hit_rate * 100).toFixed(0)}%</td></tr>}
</For>
</tbody>
</table>
</div>
<div class="space-y-4">
<PageHead title="Portfolio Risk + Accuracy Ledger" sub="Computed from your watchlist." />
<Show when={!risk.loading && !acc.loading} fallback={<div class="space-y-2"><Skeleton class="h-24 w-full" /><Skeleton class="h-24 w-full" /></div>}>
<div class="grid gap-4 md:grid-cols-2">
<Card>
<CardHeader><CardTitle>Concentration</CardTitle></CardHeader>
<CardContent>
<Show when={(risk()?.concentration || []).length} fallback={<p class="text-sm text-muted-foreground">Add tickers to your watchlist to see concentration.</p>}>
<Bar data={chartData()} options={{ responsive: true }} />
</Show>
<For each={risk()?.warnings || []}>{(w) => <p class="text-sm">⚠️ {w}</p>}</For>
</CardContent>
</Card>
<Card>
<CardHeader><CardTitle>Beta vs index</CardTitle></CardHeader>
<CardContent class="space-y-3">
<p class="font-mono text-2xl font-bold">{risk() ? String(risk()!.beta) : "…"}</p>
<h3 class="text-sm font-semibold">Correlation heatmap</h3>
<CorrHeatmap matrix={risk()?.correlation || {}} />
</CardContent>
</Card>
<Card>
<CardHeader><CardTitle>Agent accuracy</CardTitle></CardHeader>
<CardContent>
<Table>
<TableHeader><TableRow><TableHead>Agent</TableHead><TableHead class="text-right">Calls</TableHead><TableHead class="text-right">Resolved</TableHead><TableHead class="text-right">Hit %</TableHead></TableRow></TableHeader>
<TableBody>
<For each={acc()?.agents || []}>
{(a) => <TableRow><TableCell>{a.agent}</TableCell><TableCell class="text-right">{a.calls}</TableCell><TableCell class="text-right">{a.resolved}</TableCell><TableCell class="text-right">{(a.hit_rate * 100).toFixed(0)}%</TableCell></TableRow>}
</For>
</TableBody>
</Table>
</CardContent>
</Card>
</div>
</Show>
</div>
@@ -49,29 +60,28 @@ function CorrHeatmap(props: { matrix: Record<string, Record<string, number>> })
const keys = () => Object.keys(props.matrix);
const cell = (v: number) => {
const a = Math.min(1, Math.abs(v));
const bg = v >= 0 ? `rgba(63,185,80,${(0.15 + 0.65 * a).toFixed(2)})` : `rgba(248,81,73,${(0.15 + 0.65 * a).toFixed(2)})`;
return bg;
return v >= 0 ? `rgba(34,197,94,${(0.12 + 0.6 * a).toFixed(2)})` : `rgba(239,68,68,${(0.12 + 0.6 * a).toFixed(2)})`;
};
return (
<Show when={keys().length} fallback={<p class="fs-muted">No correlation data yet.</p>}>
<div class="fs-scroll"><table class="fs-table">
<thead><tr><th></th><For each={keys()}>{(k) => <th>{k}</th>}</For></tr></thead>
<tbody>
<Show when={keys().length} fallback={<p class="text-sm text-muted-foreground">No correlation data yet.</p>}>
<div class="overflow-x-auto"><Table>
<TableHeader><TableRow><TableHead></TableHead><For each={keys()}>{(k) => <TableHead>{k}</TableHead>}</For></TableRow></TableHeader>
<TableBody>
<For each={keys()}>
{(r) => (
<tr>
<td><strong>{r}</strong></td>
<TableRow>
<TableCell class="font-bold">{r}</TableCell>
<For each={keys()}>
{(c) => {
const v = props.matrix[r]?.[c] ?? 0;
return <td style={{ background: cell(v) }} title={`${r}/${c} = ${v.toFixed(2)}`}>{v.toFixed(2)}</td>;
return <TableCell style={{ background: cell(v) }} title={`${r}/${c} = ${v.toFixed(2)}`}>{v.toFixed(2)}</TableCell>;
}}
</For>
</tr>
</TableRow>
)}
</For>
</tbody>
</table></div>
</TableBody>
</Table></div>
</Show>
);
}