112 lines
4.0 KiB
TypeScript
112 lines
4.0 KiB
TypeScript
import { useState } from 'react';
|
|
import { formatPercent, formatLargeNumber } from '../../lib/format';
|
|
import type { FundamentalResponse } from '../../lib/types';
|
|
|
|
interface FundamentalsPanelProps {
|
|
data: FundamentalResponse;
|
|
}
|
|
|
|
const FIELD_LABELS: Record<string, string> = {
|
|
pe_ratio: 'P/E Ratio',
|
|
revenue_growth: 'Revenue Growth',
|
|
earnings_surprise: 'Earnings Surprise',
|
|
market_cap: 'Market Cap',
|
|
};
|
|
|
|
export function FundamentalsPanel({ data }: FundamentalsPanelProps) {
|
|
const [expanded, setExpanded] = useState<boolean>(false);
|
|
|
|
const items = [
|
|
{ key: 'pe_ratio', label: 'P/E Ratio', value: data.pe_ratio, format: (v: number) => v.toFixed(2) },
|
|
{ key: 'revenue_growth', label: 'Revenue Growth', value: data.revenue_growth, format: formatPercent },
|
|
{ key: 'earnings_surprise', label: 'Earnings Surprise', value: data.earnings_surprise, format: formatPercent },
|
|
{ key: 'market_cap', label: 'Market Cap', value: data.market_cap, format: formatLargeNumber },
|
|
];
|
|
|
|
const unavailableEntries = Object.entries(data.unavailable_fields ?? {});
|
|
|
|
return (
|
|
<div className="glass p-5">
|
|
<h3 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Fundamentals</h3>
|
|
<div className="space-y-2.5 text-sm">
|
|
{items.map((item) => {
|
|
const reason = data.unavailable_fields?.[item.key];
|
|
let display: React.ReactNode;
|
|
let valueClass = 'text-gray-200';
|
|
|
|
if (item.value !== null) {
|
|
display = item.format(item.value);
|
|
} else if (reason) {
|
|
display = reason;
|
|
valueClass = 'text-amber-400';
|
|
} else {
|
|
display = '—';
|
|
}
|
|
|
|
return (
|
|
<div key={item.key} className="flex justify-between">
|
|
<span className="text-gray-400">{item.label}</span>
|
|
<span className={valueClass}>{display}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setExpanded((prev) => !prev)}
|
|
className="mt-3 flex w-full items-center justify-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
|
aria-expanded={expanded}
|
|
aria-label={expanded ? 'Collapse details' : 'Expand details'}
|
|
>
|
|
<svg
|
|
className={`h-4 w-4 transition-transform ${expanded ? 'rotate-180' : ''}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
{expanded && (
|
|
<div className="mt-3 space-y-3 border-t border-white/10 pt-3">
|
|
<div className="space-y-1 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">Data Source</span>
|
|
<span className="text-gray-300">FMP</span>
|
|
</div>
|
|
{data.fetched_at && (
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">Fetched</span>
|
|
<span className="text-gray-300">{new Date(data.fetched_at).toLocaleString()}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{unavailableEntries.length > 0 && (
|
|
<div>
|
|
<span className="text-xs font-medium uppercase tracking-widest text-gray-500">Unavailable Fields</span>
|
|
<ul className="mt-1 space-y-1">
|
|
{unavailableEntries.map(([field, reason]) => (
|
|
<li key={field} className="flex justify-between text-sm">
|
|
<span className="text-gray-400">{FIELD_LABELS[field] ?? field}</span>
|
|
<span className="text-amber-400">{reason}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!expanded && data.fetched_at && (
|
|
<p className="mt-2 text-xs text-gray-500">
|
|
Updated {new Date(data.fetched_at).toLocaleDateString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|