feat: cockpit

This commit is contained in:
OpenSquared
2026-07-24 08:29:37 +02:00
parent e0c4aa8f65
commit f2d6700e23

View File

@@ -417,13 +417,18 @@ export default function Dashboard() {
<div className="h-[110px] flex items-center justify-center text-slate-600 text-[10px]">No chart data for {activeWatchlistName}</div> <div className="h-[110px] flex items-center justify-center text-slate-600 text-[10px]">No chart data for {activeWatchlistName}</div>
)} )}
<div className="mt-1.5 pt-1.5 border-t border-slate-700/30 space-y-0.5"> <div className="mt-1.5 pt-1.5 border-t border-slate-700/30 space-y-0.5">
{((watchlistQuotesData as any)?.items ?? []).map((it: any) => ( {((watchlistQuotesData as any)?.items ?? []).map((it: any) => {
const inCatalog = (instrumentCatalogIds as Set<string> | undefined)?.has(it.ticker.toUpperCase())
return (
<div <div
key={it.ticker} key={it.ticker}
onDoubleClick={() => { if (inCatalog) navigate(`/instruments/${encodeURIComponent(it.ticker)}`) }}
className={clsx( className={clsx(
'flex items-center justify-between gap-1.5 text-[10px] whitespace-nowrap rounded px-1 -mx-1 py-0.5 transition-colors', 'flex items-center justify-between gap-1.5 text-[10px] whitespace-nowrap rounded px-1 -mx-1 py-0.5 transition-colors',
it.ticker === activeWatchlistTicker ? 'bg-blue-900/20' : 'hover:bg-dark-700/40' it.ticker === activeWatchlistTicker ? 'bg-blue-900/20' : 'hover:bg-dark-700/40',
inCatalog && 'cursor-pointer'
)} )}
title={inCatalog ? `Double-click to open ${it.name || it.ticker} in Instrument Analysis` : undefined}
> >
<button <button
type="button" type="button"
@@ -448,7 +453,7 @@ export default function Dashboard() {
</span> </span>
)} )}
</span> </span>
{(instrumentCatalogIds as Set<string> | undefined)?.has(it.ticker.toUpperCase()) && ( {inCatalog && (
<Link <Link
to={`/instruments/${encodeURIComponent(it.ticker)}`} to={`/instruments/${encodeURIComponent(it.ticker)}`}
className="text-slate-600 hover:text-blue-400 shrink-0 transition-colors" className="text-slate-600 hover:text-blue-400 shrink-0 transition-colors"
@@ -459,7 +464,8 @@ export default function Dashboard() {
)} )}
</div> </div>
</div> </div>
))} )
})}
</div> </div>
</> </>
) : ( ) : (
@@ -813,11 +819,11 @@ export default function Dashboard() {
<span className="section-title mb-0 text-[10px]">🛡 Risk</span> <span className="section-title mb-0 text-[10px]">🛡 Risk</span>
<ArrowUpRight className="w-3 h-3 text-slate-600" /> <ArrowUpRight className="w-3 h-3 text-slate-600" />
</div> </div>
<div className={clsx('text-lg font-bold mt-0.5 flex items-center gap-2', alertCount > 0 ? 'text-red-400' : 'text-emerald-400')}> <div className={clsx('text-[10px] font-bold mt-0.5 flex items-center gap-2', alertCount > 0 ? 'text-red-400' : 'text-emerald-400')}>
{alertCount > 0 ? `${alertCount} alert${alertCount > 1 ? 's' : ''}` : 'OK'} {alertCount > 0 ? `${alertCount} alert${alertCount > 1 ? 's' : ''}` : 'OK'}
</div> </div>
{radarAxes.length > 0 && ( {radarAxes.length > 0 && (
<ResponsiveContainer width="100%" height={110}> <ResponsiveContainer width="100%" height={180}>
<RadarChart data={radarAxes}> <RadarChart data={radarAxes}>
<PolarGrid stroke="#1e2d4d" /> <PolarGrid stroke="#1e2d4d" />
<PolarAngleAxis dataKey="axis" tick={{ fill: '#94a3b8', fontSize: 9 }} /> <PolarAngleAxis dataKey="axis" tick={{ fill: '#94a3b8', fontSize: 9 }} />