🎨 style(analysis): improve UI clarity and visual hierarchy
Enhance the company analysis overview page with better data presentation and visual design: - Fix business description display by filtering raw API data artifacts - Improve metadata layout with consolidated single-line format - Fix price chart Y-axis scaling to auto-scale to data range - Replace 'n/a' with cleaner em dash (—) for empty states - Add visual indicators and color-coded backgrounds to bull/bear sections - Improve empty state messaging with centered icons These changes improve information density, visual hierarchy, and overall user experience across the analysis page. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -8,18 +8,22 @@ type ValuationFactsTableProps = {
|
||||
};
|
||||
|
||||
function formatRatio(value: number | null) {
|
||||
return value === null ? 'n/a' : `${value.toFixed(2)}x`;
|
||||
return value === null ? '—' : `${value.toFixed(2)}x`;
|
||||
}
|
||||
|
||||
function formatShares(value: number | null) {
|
||||
return value === null ? 'n/a' : formatScaledNumber(value, { maximumFractionDigits: 2 });
|
||||
return value === null ? '—' : formatScaledNumber(value, { maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
function formatCompactCurrencyOrDash(value: number | null) {
|
||||
return value === null ? '—' : formatCompactCurrency(value);
|
||||
}
|
||||
|
||||
export function ValuationFactsTable(props: ValuationFactsTableProps) {
|
||||
const items = [
|
||||
{ label: 'Source', value: props.analysis.valuationSnapshot.source },
|
||||
{ label: 'Market cap', value: props.analysis.valuationSnapshot.marketCap === null ? 'n/a' : formatCompactCurrency(props.analysis.valuationSnapshot.marketCap) },
|
||||
{ label: 'Enterprise value', value: props.analysis.valuationSnapshot.enterpriseValue === null ? 'n/a' : formatCompactCurrency(props.analysis.valuationSnapshot.enterpriseValue) },
|
||||
{ label: 'Market cap', value: formatCompactCurrencyOrDash(props.analysis.valuationSnapshot.marketCap) },
|
||||
{ label: 'Enterprise value', value: formatCompactCurrencyOrDash(props.analysis.valuationSnapshot.enterpriseValue) },
|
||||
{ label: 'Shares outstanding', value: formatShares(props.analysis.valuationSnapshot.sharesOutstanding) },
|
||||
{ label: 'Trailing P/E', value: formatRatio(props.analysis.valuationSnapshot.trailingPe) },
|
||||
{ label: 'EV / Revenue', value: formatRatio(props.analysis.valuationSnapshot.evToRevenue) },
|
||||
|
||||
Reference in New Issue
Block a user