Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

Add K/M/B scale toggles for financial displays

Browse Source
This commit is contained in:
francy51
2026-03-01 19:23:45 -05:00
parent 209b650658
commit b8309c9969
5 changed files with 519 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/analysis/page.tsx
View File

@@ -20,7 +20,13 @@ import { Input } from '@/components/ui/input';
import { Panel } from '@/components/ui/panel';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { getCompanyAnalysis } from '@/lib/api';
import { asNumber, formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
import {
asNumber,
formatCurrency,
formatCurrencyByScale,
formatPercent,
type NumberScaleUnit
} from '@/lib/format';
import type { CompanyAnalysis } from '@/lib/types';
type FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
@@ -41,6 +47,12 @@ const FINANCIAL_PERIOD_FILTER_OPTIONS: Array<{ value: FinancialPeriodFilter; lab
{ value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
];
const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
{ value: 'thousands', label: 'Thousands (K)' },
{ value: 'millions', label: 'Millions (M)' },
{ value: 'billions', label: 'Billions (B)' }
];
function formatShortDate(value: string) {
return format(new Date(value), 'MMM yyyy');
}
@@ -75,6 +87,17 @@ function includesFinancialPeriod(filingType: '10-K' | '10-Q', filter: FinancialP
return true;
}
function asScaledFinancialCurrency(
value: number | null | undefined,
scale: NumberScaleUnit
) {
if (value === null || value === undefined) {
return 'n/a';
}
return formatCurrencyByScale(value, scale);
}
export default function AnalysisPage() {
return (
<Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>}>
@@ -93,6 +116,7 @@ function AnalysisPageContent() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [financialPeriodFilter, setFinancialPeriodFilter] = useState<FinancialPeriodFilter>('quarterlyAndFiscalYearEnd');
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
useEffect(() => {
const fromQuery = searchParams.get('ticker');
@@ -163,6 +187,10 @@ function AnalysisPageContent() {
return (analysis?.filings ?? []).filter((filing) => isFinancialSnapshotForm(filing.filing_type));
}, [analysis?.filings]);
const selectedFinancialScaleLabel = useMemo(() => {
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
}, [financialValueScale]);
if (isPending || !isAuthenticated) {
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading analysis desk...</div>;
}
@@ -262,20 +290,35 @@ function AnalysisPageContent() {
<Panel
title="Financial Table"
subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin."
subtitle={`Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin. Values shown in ${selectedFinancialScaleLabel}.`}
actions={(
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialPeriodFilter(option.value)}
>
{option.label}
</Button>
))}
<div className="flex flex-col items-end gap-2">
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialPeriodFilter(option.value)}
>
{option.label}
</Button>
))}
</div>
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialValueScale ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialValueScale(option.value)}
>
{option.label}
</Button>
))}
</div>
</div>
)}
>
@@ -303,11 +346,11 @@ function AnalysisPageContent() {
<td>{formatLongDate(point.filingDate)}</td>
<td>{point.periodLabel}</td>
<td>{point.filingType}</td>
<td>{point.revenue === null ? 'n/a' : formatCompactCurrency(point.revenue)}</td>
<td>{asScaledFinancialCurrency(point.revenue, financialValueScale)}</td>
<td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>
{point.netIncome === null ? 'n/a' : formatCompactCurrency(point.netIncome)}
{asScaledFinancialCurrency(point.netIncome, financialValueScale)}
</td>
<td>{point.assets === null ? 'n/a' : formatCompactCurrency(point.assets)}</td>
<td>{asScaledFinancialCurrency(point.assets, financialValueScale)}</td>
<td>{point.netMargin === null ? 'n/a' : formatPercent(point.netMargin)}</td>
</tr>
))}
@@ -318,7 +361,10 @@ function AnalysisPageContent() {
</Panel>
</div>
<Panel title="Filings" subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded.`}>
<Panel
title="Filings"
subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded. Values shown in ${selectedFinancialScaleLabel}.`}
>
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
) : periodEndFilings.length === 0 ? (
@@ -343,9 +389,9 @@ function AnalysisPageContent() {
<td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
<td>{filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</td>
<td>{filing.filing_type}</td>
<td>{filing.metrics?.revenue !== null && filing.metrics?.revenue !== undefined ? formatCompactCurrency(filing.metrics.revenue) : 'n/a'}</td>
<td>{filing.metrics?.netIncome !== null && filing.metrics?.netIncome !== undefined ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a'}</td>
<td>{filing.metrics?.totalAssets !== null && filing.metrics?.totalAssets !== undefined ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a'}</td>
<td>{asScaledFinancialCurrency(filing.metrics?.revenue, financialValueScale)}</td>
<td>{asScaledFinancialCurrency(filing.metrics?.netIncome, financialValueScale)}</td>
<td>{asScaledFinancialCurrency(filing.metrics?.totalAssets, financialValueScale)}</td>
<td>
{filing.filing_url ? (
<a href={filing.filing_url} target="_blank" rel="noreferrer" className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">

48
app/filings/page.tsx
View File

@@ -15,7 +15,13 @@ import { useAuthGuard } from '@/hooks/use-auth-guard';
import { useTaskPoller } from '@/hooks/use-task-poller';
import { getTask, listFilings, queueFilingAnalysis, queueFilingSync } from '@/lib/api';
import type { Filing, Task } from '@/lib/types';
import { formatCompactCurrency } from '@/lib/format';
import { formatCurrencyByScale, type NumberScaleUnit } from '@/lib/format';
const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
{ value: 'thousands', label: 'Thousands (K)' },
{ value: 'millions', label: 'Millions (M)' },
{ value: 'billions', label: 'Billions (B)' }
];
export default function FilingsPage() {
return (
@@ -39,6 +45,17 @@ function hasFinancialSnapshot(filing: Filing) {
return filing.filing_type === '10-K' || filing.filing_type === '10-Q';
}
function asScaledFinancialSnapshot(
value: number | null | undefined,
scale: NumberScaleUnit
) {
if (value === null || value === undefined) {
return 'n/a';
}
return formatCurrencyByScale(value, scale);
}
function resolveOriginalFilingUrl(filing: Filing) {
if (filing.filing_url) {
return filing.filing_url;
@@ -93,6 +110,7 @@ function FilingsPageContent() {
const [filterTickerInput, setFilterTickerInput] = useState('');
const [searchTicker, setSearchTicker] = useState('');
const [activeTask, setActiveTask] = useState<Task | null>(null);
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
useEffect(() => {
const ticker = searchParams.get('ticker');
@@ -168,6 +186,10 @@ function FilingsPageContent() {
return counts;
}, [filings]);
const selectedFinancialScaleLabel = useMemo(() => {
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
}, [financialValueScale]);
if (isPending || !isAuthenticated) {
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Opening filings stream...</div>;
}
@@ -248,7 +270,25 @@ function FilingsPageContent() {
</Panel>
</div>
<Panel title="Filing Ledger" subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}.`}>
<Panel
title="Filing Ledger"
subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}. Values shown in ${selectedFinancialScaleLabel}.`}
actions={(
<div className="flex flex-wrap justify-end gap-2">
{FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialValueScale ? 'primary' : 'ghost'}
className="px-2 py-1 text-xs"
onClick={() => setFinancialValueScale(option.value)}
>
{option.label}
</Button>
))}
</div>
)}
>
{error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Fetching filings...</p>
@@ -282,7 +322,7 @@ function FilingsPageContent() {
<div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
<dt className="text-[color:var(--terminal-muted)]">Financial Snapshot</dt>
<dd className="mt-1 text-[color:var(--terminal-bright)]">
{financialForm ? (revenue ? formatCompactCurrency(revenue) : 'n/a') : 'Qualitative filing'}
{financialForm ? asScaledFinancialSnapshot(revenue, financialValueScale) : 'Qualitative filing'}
</dd>
</div>
<div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
@@ -351,7 +391,7 @@ function FilingsPageContent() {
</td>
<td>{filing.filing_type}</td>
<td>{formatFilingDate(filing.filing_date)}</td>
<td>{financialForm ? (revenue ? formatCompactCurrency(revenue) : 'n/a') : 'Qualitative filing'}</td>
<td>{financialForm ? asScaledFinancialSnapshot(revenue, financialValueScale) : 'Qualitative filing'}</td>
<td className="max-w-[18rem]">{filing.company_name}</td>
<td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
<td>

416
app/financials/page.tsx
View File

@@ -26,14 +26,21 @@ import { Input } from '@/components/ui/input';
import { Panel } from '@/components/ui/panel';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { getCompanyAnalysis } from '@/lib/api';
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
import {
formatCurrencyByScale,
formatPercent,
type NumberScaleUnit
} from '@/lib/format';
import type { CompanyAnalysis } from '@/lib/types';
type FinancialSeriesPoint = {
type StatementPeriodPoint = {
filingDate: string;
filingType: '10-K' | '10-Q';
periodKind: 'quarterly' | 'fiscalYearEnd';
periodLabel: 'Quarter End' | 'Fiscal Year End';
};
type FinancialSeriesPoint = StatementPeriodPoint & {
periodKind: 'quarterly' | 'fiscalYearEnd';
label: string;
revenue: number | null;
netIncome: number | null;
@@ -44,14 +51,18 @@ type FinancialSeriesPoint = {
debtToAssets: number | null;
};
type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
type CompanyMetricPoint = StatementPeriodPoint & {
metrics: string[];
};
const AXIS_CURRENCY = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
notation: 'compact',
maximumFractionDigits: 1
});
type StatementMatrixRow<TPoint extends StatementPeriodPoint> = {
key: string;
label: string;
value: (point: TPoint, index: number, series: TPoint[]) => string;
valueClassName?: (point: TPoint, index: number, series: TPoint[]) => string | undefined;
};
type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';
const CHART_PERIOD_FILTER_OPTIONS: Array<{ value: ChartPeriodFilter; label: string }> = [
{ value: 'quarterlyAndFiscalYearEnd', label: 'Quarterly + Fiscal Year End' },
@@ -59,6 +70,12 @@ const CHART_PERIOD_FILTER_OPTIONS: Array<{ value: ChartPeriodFilter; label: stri
{ value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
];
const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
{ value: 'thousands', label: 'Thousands (K)' },
{ value: 'millions', label: 'Millions (M)' },
{ value: 'billions', label: 'Billions (B)' }
];
function formatShortDate(value: string) {
const parsed = new Date(value);
if (Number.isNaN(parsed.getTime())) {
@@ -85,14 +102,33 @@ function ratioPercent(numerator: number | null, denominator: number | null) {
return (numerator / denominator) * 100;
}
function asDisplayCurrency(value: number | null) {
return value === null ? 'n/a' : formatCurrency(value);
function asDisplayCurrency(
value: number | null,
scale: NumberScaleUnit
) {
return value === null ? 'n/a' : formatCurrencyByScale(value, scale);
}
function asDisplayPercent(value: number | null) {
return value === null ? 'n/a' : formatPercent(value);
}
function asDisplayMultiple(value: number | null) {
return value === null ? 'n/a' : `${value.toFixed(2)}x`;
}
function asDisplaySignedCurrency(
value: number | null,
scale: NumberScaleUnit
) {
if (value === null) {
return 'n/a';
}
const formatted = formatCurrencyByScale(value, scale);
return value > 0 ? `+${formatted}` : formatted;
}
function normalizeTooltipValue(value: unknown) {
if (Array.isArray(value)) {
const [first] = value;
@@ -106,7 +142,10 @@ function normalizeTooltipValue(value: unknown) {
return null;
}
function asTooltipCurrency(value: unknown) {
function asTooltipCurrency(
value: unknown,
scale: NumberScaleUnit
) {
const normalized = normalizeTooltipValue(value);
if (normalized === null) {
return 'n/a';
@@ -117,7 +156,14 @@ function asTooltipCurrency(value: unknown) {
return 'n/a';
}
return formatCompactCurrency(numeric);
return formatCurrencyByScale(numeric, scale);
}
function asAxisCurrencyTick(
value: number,
scale: NumberScaleUnit
) {
return formatCurrencyByScale(value, scale, { maximumFractionDigits: 1 });
}
function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFilter) {
@@ -132,6 +178,193 @@ function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFil
return true;
}
function ratioMultiple(numerator: number | null, denominator: number | null) {
if (numerator === null || denominator === null || denominator === 0) {
return null;
}
return numerator / denominator;
}
function StatementMatrixTable<TPoint extends StatementPeriodPoint>({
points,
rows
}: {
points: TPoint[];
rows: Array<StatementMatrixRow<TPoint>>;
}) {
return (
<div className="overflow-x-auto">
<table className="data-table min-w-[980px]">
<thead>
<tr>
<th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
{points.map((point, index) => (
<th key={`${point.filingDate}-${point.filingType}-${index}`}>
<div className="flex flex-col gap-1">
<span>{formatLongDate(point.filingDate)}</span>
<span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{point.filingType} · {point.periodLabel}</span>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.key}>
<td className="sticky left-0 z-10 whitespace-nowrap bg-[color:var(--panel)] font-medium text-[color:var(--terminal-bright)]">{row.label}</td>
{points.map((point, index, series) => (
<td
key={`${row.key}-${point.filingDate}-${point.filingType}-${index}`}
className={row.valueClassName?.(point, index, series)}
>
{row.value(point, index, series)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}
function buildOperatingStatementRows(
scale: NumberScaleUnit
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
return [
{
key: 'revenue',
label: 'Revenue',
value: (point) => asDisplayCurrency(point.revenue, scale)
},
{
key: 'net-income',
label: 'Net Income',
value: (point) => asDisplayCurrency(point.netIncome, scale),
valueClassName: (point) => {
if (point.netIncome === null) {
return undefined;
}
return point.netIncome >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
}
},
{
key: 'net-margin',
label: 'Net Margin',
value: (point) => asDisplayPercent(point.netMargin)
}
];
}
function buildBalanceSheetRows(
scale: NumberScaleUnit
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
return [
{
key: 'total-assets',
label: 'Total Assets',
value: (point) => asDisplayCurrency(point.totalAssets, scale)
},
{
key: 'cash',
label: 'Cash',
value: (point) => asDisplayCurrency(point.cash, scale)
},
{
key: 'debt',
label: 'Debt',
value: (point) => asDisplayCurrency(point.debt, scale)
},
{
key: 'debt-to-assets',
label: 'Debt / Assets',
value: (point) => asDisplayPercent(point.debtToAssets),
valueClassName: (point) => {
if (point.debtToAssets === null) {
return undefined;
}
return point.debtToAssets <= 60 ? 'text-[#96f5bf]' : 'text-[#ffd08a]';
}
}
];
}
function buildCashFlowProxyRows(
scale: NumberScaleUnit
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
return [
{
key: 'ending-cash',
label: 'Ending Cash Balance',
value: (point) => asDisplayCurrency(point.cash, scale)
},
{
key: 'cash-change',
label: 'Cash Change vs Prior',
value: (point, index, series) => {
if (index === 0) {
return 'n/a';
}
const previous = series[index - 1];
if (point.cash === null || previous.cash === null) {
return 'n/a';
}
return asDisplaySignedCurrency(point.cash - previous.cash, scale);
},
valueClassName: (point, index, series) => {
if (index === 0) {
return undefined;
}
const previous = series[index - 1];
if (point.cash === null || previous.cash === null) {
return undefined;
}
return point.cash - previous.cash >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
}
},
{
key: 'debt-change',
label: 'Debt Change vs Prior',
value: (point, index, series) => {
if (index === 0) {
return 'n/a';
}
const previous = series[index - 1];
if (point.debt === null || previous.debt === null) {
return 'n/a';
}
return asDisplaySignedCurrency(point.debt - previous.debt, scale);
},
valueClassName: (point, index, series) => {
if (index === 0) {
return undefined;
}
const previous = series[index - 1];
if (point.debt === null || previous.debt === null) {
return undefined;
}
return point.debt - previous.debt <= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
}
},
{
key: 'cash-to-debt',
label: 'Cash / Debt',
value: (point) => asDisplayMultiple(ratioMultiple(point.cash, point.debt))
}
];
}
function isFinancialPeriodForm(filingType: CompanyAnalysis['financials'][number]['filingType']): filingType is '10-K' | '10-Q' {
return filingType === '10-K' || filingType === '10-Q';
}
@@ -154,6 +387,7 @@ function FinancialsPageContent() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [chartPeriodFilter, setChartPeriodFilter] = useState<ChartPeriodFilter>('quarterlyAndFiscalYearEnd');
const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');
useEffect(() => {
const fromQuery = searchParams.get('ticker');
@@ -222,6 +456,10 @@ function FinancialsPageContent() {
return CHART_PERIOD_FILTER_OPTIONS.find((option) => option.value === chartPeriodFilter)?.label ?? 'Quarterly + Fiscal Year End';
}, [chartPeriodFilter]);
const selectedFinancialScaleLabel = useMemo(() => {
return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
}, [financialValueScale]);
const latestSnapshot = financialSeries[financialSeries.length - 1] ?? null;
const liquidityRatio = useMemo(() => {
@@ -253,6 +491,42 @@ function FinancialsPageContent() {
};
}, [chartSeries]);
const companyMetricSeries = useMemo<CompanyMetricPoint[]>(() => {
return (analysis?.filings ?? [])
.filter((entry): entry is CompanyAnalysis['filings'][number] & { filing_type: '10-K' | '10-Q' } => {
return isFinancialPeriodForm(entry.filing_type);
})
.slice()
.sort((a, b) => Date.parse(a.filing_date) - Date.parse(b.filing_date))
.map((entry) => ({
filingDate: entry.filing_date,
filingType: entry.filing_type,
periodLabel: entry.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
metrics: entry.analysis?.companyMetrics ?? []
}));
}, [analysis?.filings]);
const companyMetricRows = useMemo<Array<StatementMatrixRow<CompanyMetricPoint>>>(() => {
const rowCount = companyMetricSeries.reduce((max, point) => Math.max(max, point.metrics.length), 0);
return Array.from({ length: rowCount }, (_, index) => ({
key: `company-metric-${index + 1}`,
label: `Metric ${index + 1}`,
value: (point) => point.metrics[index] ?? 'n/a'
}));
}, [companyMetricSeries]);
const operatingStatementRows = useMemo(() => {
return buildOperatingStatementRows(financialValueScale);
}, [financialValueScale]);
const balanceSheetRows = useMemo(() => {
return buildBalanceSheetRows(financialValueScale);
}, [financialValueScale]);
const cashFlowProxyRows = useMemo(() => {
return buildCashFlowProxyRows(financialValueScale);
}, [financialValueScale]);
if (isPending || !isAuthenticated) {
return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading financial terminal...</div>;
}
@@ -312,25 +586,25 @@ function FinancialsPageContent() {
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
<MetricCard
label="Latest Revenue"
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.revenue) : 'n/a'}
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.revenue, financialValueScale) : 'n/a'}
delta={latestSnapshot ? `${latestSnapshot.filingType} · ${formatLongDate(latestSnapshot.filingDate)}` : 'No filings loaded'}
/>
<MetricCard
label="Latest Net Income"
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome) : 'n/a'}
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome, financialValueScale) : 'n/a'}
delta={latestSnapshot ? `Net margin ${asDisplayPercent(latestSnapshot.netMargin)}` : 'No filings loaded'}
positive={(latestSnapshot?.netIncome ?? 0) >= 0}
/>
<MetricCard
label="Latest Total Assets"
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.totalAssets) : 'n/a'}
value={latestSnapshot ? asDisplayCurrency(latestSnapshot.totalAssets, financialValueScale) : 'n/a'}
delta={latestSnapshot ? `Debt/assets ${asDisplayPercent(latestSnapshot.debtToAssets)}` : 'No filings loaded'}
positive={latestSnapshot ? (latestSnapshot.debtToAssets ?? 0) <= 60 : true}
/>
<MetricCard
label="Cash / Debt"
value={liquidityRatio === null ? 'n/a' : `${liquidityRatio.toFixed(2)}x`}
delta={latestSnapshot ? `Cash ${asDisplayCurrency(latestSnapshot.cash)} · Debt ${asDisplayCurrency(latestSnapshot.debt)}` : 'No filings loaded'}
delta={latestSnapshot ? `Cash ${asDisplayCurrency(latestSnapshot.cash, financialValueScale)} · Debt ${asDisplayCurrency(latestSnapshot.debt, financialValueScale)}` : 'No filings loaded'}
/>
</div>
@@ -349,6 +623,21 @@ function FinancialsPageContent() {
</div>
</Panel>
<Panel title="Financial Value Scale" subtitle={`Display revenue, net income, assets, cash, and debt in ${selectedFinancialScaleLabel}.`}>
<div className="flex flex-wrap gap-2">
{FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
<Button
key={option.value}
type="button"
variant={option.value === financialValueScale ? 'primary' : 'ghost'}
onClick={() => setFinancialValueScale(option.value)}
>
{option.label}
</Button>
))}
</div>
</Panel>
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
<Panel title="Income Statement Trend" subtitle="Revenue and net income by filing period.">
{loading ? (
@@ -361,8 +650,8 @@ function FinancialsPageContent() {
<BarChart data={chartSeries}>
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
<XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
<Tooltip formatter={(value) => asTooltipCurrency(value)} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)} />
<Tooltip formatter={(value) => asTooltipCurrency(value, financialValueScale)} />
<Legend />
<Bar dataKey="revenue" name="Revenue" fill="#68ffd5" radius={[4, 4, 0, 0]} />
<Bar dataKey="netIncome" name="Net Income" fill="#5fd3ff" radius={[4, 4, 0, 0]} />
@@ -389,8 +678,8 @@ function FinancialsPageContent() {
</defs>
<CartesianGrid strokeDasharray="2 2" stroke="rgba(126, 217, 255, 0.2)" />
<XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
<Tooltip formatter={(value) => asTooltipCurrency(value)} />
<YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)} />
<Tooltip formatter={(value) => asTooltipCurrency(value, financialValueScale)} />
<Legend />
<Area type="monotone" dataKey="totalAssets" name="Total Assets" stroke="#68ffd5" fill="url(#assetsGradient)" strokeWidth={2} />
<Line type="monotone" dataKey="cash" name="Cash" stroke="#8bd3ff" strokeWidth={2} dot={false} />
@@ -461,46 +750,49 @@ function FinancialsPageContent() {
</Panel>
</div>
<Panel title="Period-End Metrics Table" subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) statement points extracted from filing metadata.">
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading table...</p>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No financial rows are available for this ticker yet.</p>
) : (
<div className="overflow-x-auto">
<table className="data-table min-w-[960px]">
<thead>
<tr>
<th>Filed</th>
<th>Period</th>
<th>Form</th>
<th>Revenue</th>
<th>Net Income</th>
<th>Total Assets</th>
<th>Cash</th>
<th>Debt</th>
<th>Net Margin</th>
</tr>
</thead>
<tbody>
{financialSeries.map((point, index) => (
<tr key={`${point.filingDate}-${point.filingType}-${index}`}>
<td>{formatLongDate(point.filingDate)}</td>
<td>{point.periodLabel}</td>
<td>{point.filingType}</td>
<td>{asDisplayCurrency(point.revenue)}</td>
<td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>{asDisplayCurrency(point.netIncome)}</td>
<td>{asDisplayCurrency(point.totalAssets)}</td>
<td>{asDisplayCurrency(point.cash)}</td>
<td>{asDisplayCurrency(point.debt)}</td>
<td>{asDisplayPercent(point.netMargin)}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</Panel>
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
<Panel title="Operating Statement" subtitle={`Dates are in the top row; operating metrics are listed down the left side. Values shown in ${selectedFinancialScaleLabel}.`}>
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading operating statement...</p>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No operating statement rows are available for this ticker yet.</p>
) : (
<StatementMatrixTable points={financialSeries} rows={operatingStatementRows} />
)}
</Panel>
<Panel title="Balance Sheet" subtitle={`Balance sheet rows transposed by filing date for side-by-side period comparison. Values shown in ${selectedFinancialScaleLabel}.`}>
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading balance sheet...</p>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet rows are available for this ticker yet.</p>
) : (
<StatementMatrixTable points={financialSeries} rows={balanceSheetRows} />
)}
</Panel>
<Panel title="Cash Flow Statement" subtitle={`Proxy cash-flow view derived from period-end cash and debt until direct cash-flow tags are indexed. Values shown in ${selectedFinancialScaleLabel}.`}>
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading cash flow statement...</p>
) : financialSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No cash flow statement rows are available for this ticker yet.</p>
) : (
<StatementMatrixTable points={financialSeries} rows={cashFlowProxyRows} />
)}
</Panel>
<Panel title="Company Metrics" subtitle="Company-specific KPI notes extracted from filings (same-store sales, ARPU, users, and similar metrics).">
{loading ? (
<p className="text-sm text-[color:var(--terminal-muted)]">Loading company metrics...</p>
) : companyMetricSeries.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No filing periods are available for company metrics yet.</p>
) : companyMetricRows.length === 0 ? (
<p className="text-sm text-[color:var(--terminal-muted)]">No company-specific KPI metrics were extracted for the selected filings.</p>
) : (
<StatementMatrixTable points={companyMetricSeries} rows={companyMetricRows} />
)}
</Panel>
</div>
<Panel>
<div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">

20
lib/format.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, expect, it } from 'bun:test';
import { formatScaledNumber } from './format';
import { formatCurrencyByScale, formatScaledNumber } from './format';
describe('formatScaledNumber', () => {
it('keeps values below one thousand unscaled', () => {
@@ -27,3 +27,21 @@ describe('formatScaledNumber', () => {
expect(formatScaledNumber(999_950)).toBe('1M');
});
});
describe('formatCurrencyByScale', () => {
it('formats values in thousands', () => {
expect(formatCurrencyByScale(12_345, 'thousands')).toBe('$12.3K');
});
it('formats values in millions', () => {
expect(formatCurrencyByScale(12_345_678, 'millions')).toBe('$12.3M');
});
it('formats values in billions', () => {
expect(formatCurrencyByScale(12_345_678_901, 'billions')).toBe('$12.3B');
});
it('keeps sign for negative values', () => {
expect(formatCurrencyByScale(-2_500_000, 'millions')).toBe('-$2.5M');
});
});

35
lib/format.ts
View File

@@ -12,6 +12,8 @@ type NumberScale = {
suffix: string;
};
export type NumberScaleUnit = 'thousands' | 'millions' | 'billions';
const NUMBER_SCALES: NumberScale[] = [
{ divisor: 1, suffix: '' },
{ divisor: 1_000, suffix: 'K' },
@@ -19,11 +21,22 @@ const NUMBER_SCALES: NumberScale[] = [
{ divisor: 1_000_000_000, suffix: 'B' }
];
const NUMBER_SCALE_UNITS: Record<NumberScaleUnit, NumberScale> = {
thousands: { divisor: 1_000, suffix: 'K' },
millions: { divisor: 1_000_000, suffix: 'M' },
billions: { divisor: 1_000_000_000, suffix: 'B' }
};
type FormatScaledNumberOptions = {
minimumFractionDigits?: number;
maximumFractionDigits?: number;
};
type FormatScaledCurrencyOptions = {
minimumFractionDigits?: number;
maximumFractionDigits?: number;
};
export function formatScaledNumber(
value: string | number | null | undefined,
options: FormatScaledNumberOptions = {}
@@ -64,6 +77,28 @@ export function formatScaledNumber(
return `${formatted}${NUMBER_SCALES[scaleIndex].suffix}`;
}
export function formatCurrencyByScale(
value: string | number | null | undefined,
scale: NumberScaleUnit,
options: FormatScaledCurrencyOptions = {}
) {
const {
minimumFractionDigits = 0,
maximumFractionDigits = 1
} = options;
const { divisor, suffix } = NUMBER_SCALE_UNITS[scale];
const scaled = asNumber(value) / divisor;
const formatted = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits,
maximumFractionDigits
}).format(scaled);
return `${formatted}${suffix}`;
}
export function formatCurrency(value: string | number | null | undefined) {
return new Intl.NumberFormat('en-US', {
style: 'currency',