Assembling...
npx arkitekton add FN-304Interactive portfolio analytics with asset allocation charts, performance attribution, benchmark comparison, and Monte Carlo projections.
Community construct — compliance mapping available after certification
No dependencies required. Fully standalone.
Pre-built solutions that include this construct. Deploy a complete application to Studio.
Wealth Management Platform
Comprehensive wealth management platform with portfolio visualization, trade execution, risk assessment, OFAC screening, regulatory reporting (SOX), and client onboarding with KYC/KYB verification.
Trading Platform
Electronic trading platform with real-time market data feeds, order management, position tracking, risk management, portfolio analytics, and regulatory reporting for equities, options, and fixed income.
These constructs have compatible ports for seamless integration.
Very well-maintained. The team responds quickly to issues and the release cadence is impressive. Have been using it for 6+ months.
Good overall, but the learning curve is a bit steep for junior developers. Once you get past that, it is incredibly powerful.
Production-ready out of the box. We deployed to 12 microservices without a single compatibility issue. Highly recommended.
The variant system is a game-changer. Being able to swap between compact and full versions without code changes is brilliant.
Meets all our compliance requirements. Passed our SOC 2 audit without any flags related to this construct.
ark add FN-304const FACTORS=[{name:"Market Risk",score:82,level:"Low"},{name:"Credit Risk",score:65,level:"Medium"},{name:"Liquidity",score:91,level:"Low"},{name:"Operational",score:45,level:"High"},{name:"Compliance",score:78,level:"Medium"}];
export function PortfolioMeter({ accentColor = "#F59E0B" }: {accentColor?:string}) {
const overall = Math.round(FACTORS.reduce((a,f)=>a+f.score,0)/FACTORS.length);
const color = overall >= 70 ? "#10B981" : overall >= 40 ? "#F59E0B" : "#EF4444";
return (<div className="p-4 space-y-3 max-w-sm mx-auto"><div className="flex items-center gap-4"><div className="relative w-16 h-16"><svg viewBox="0 0 100 100" className="-rotate-90"><circle cx="50" cy="50" r="40" fill="none" stroke="#E5E7EB" strokeWidth="8" /><circle cx="50" cy="50" r="40" fill="none" stroke={color} strokeWidth="8" strokeDasharray={`${overall*2.51} 251`} strokeLinecap="round" /></svg><div className="absolute inset-0 flex items-center justify-center text-lg font-bold" style={{color}}>{overall}</div></div><div><div className="text-sm font-semibold text-gray-900">Portfolio Health</div><div className="text-xs text-gray-500">Overall performance score</div></div></div><div className="space-y-2">{FACTORS.map(f=>{const c=f.score>=70?"#10B981":f.score>=40?"#F59E0B":"#EF4444"; return (<div key={f.name} className="flex items-center justify-between"><div className="flex items-center gap-2"><span className="text-xs text-gray-700 w-24">{f.name}</span><div className="w-24 h-1.5 bg-gray-200 rounded-full"><div className="h-full rounded-full" style={{width:`${f.score}%`,backgroundColor:c}} /></div></div><span className="text-[10px] px-2 py-0.5 rounded-full font-medium" style={{backgroundColor:c+"18",color:c}}>{f.level}</span></div>);})}</div></div>);
}Showing: Portfolio Meter (standard)
No code variants available yet
Variants for Portfolio Visualizer are coming soon