Analytics
See the bigger picture
Overview
Analytics is a premium screen that gives you a deeper look at your portfolio. The hero card shows your total portfolio return (gain/loss percentage and dollar amount). Below that are three metric tiles: diversification score (0 to 100), number of holdings, and number of asset types. Then you get best and worst performers with their gain/loss percentages. The allocation section shows a donut pie chart colored by asset type (stocks are green, ETFs blue, crypto yellow, etc) with a legend below. At the bottom are AI generated suggestions powered by Claude. Each suggestion has a button that opens the Assistant tab with a pre filled prompt to discuss it further.
How it works
All analytics data comes from the useAnalyticsData hook, which pulls from usePortfolioStore and usePortfolioCalculations. It computes everything client side from the assets and their current prices.
The diversification score is calculated based on how spread out your allocation is across asset types. A portfolio that is 100% stocks scores low. A portfolio spread across stocks, bonds, real estate, and crypto scores high.
Performance metrics (total return, best/worst performers) use the difference between current market value and total cost basis for each holding.
The pie chart is a custom SVG component (PieChart) that renders a donut chart with configurable size, stroke width, and gap between segments. Colors are mapped by asset type.
AI suggestions come from a Claude API call through the assistant Edge Function. The hook sends your portfolio composition as context and Claude returns actionable suggestions.
The entire screen is wrapped in a PremiumGate component. If you are on the free tier, you see a blurred preview with an upgrade prompt instead of the actual data.
Key decisions
Client side computation
All analytics are computed on the device, not on a server. This means the data is always fresh (it uses the same price data as the portfolio screen) and there is no extra API call just for analytics. The tradeoff is that complex calculations like portfolio history over time can be slow with many holdings, but for typical portfolios (under 50 assets) it is instant.
AI suggestions that link to the assistant
Instead of just showing static text suggestions, each one has a "Discuss with AI" button. Tapping it sets a pending prompt in the assistant store and navigates to the Assistant tab. This creates a natural flow from analytics insight to a deeper conversation about your portfolio.
PremiumGate wrapper pattern
Rather than checking subscription status inside every premium screen, we built a PremiumGate component that wraps the content. If the user has a premium subscription, it renders children normally. If not, it shows a blurred overlay with an upgrade CTA. This makes gating any screen as simple as wrapping it in one component.