StockCard & StockCardMini Components
Relevant source files
The following files were used as context for generating this wiki page:The StockCard and StockCardMini are React components designed to display summary information for a given stock ticker. StockCard provides a larger view with a historical price chart, while StockCardMini offers a more compact, data-focused summary. Both components are interactive, allowing users to click them to navigate to a more detailed quote page for the respective ticker. They serve as key at-a-glance UI elements within the application.
Sources: client/src/components/StockCard/index.tsx, client/src/components/StockCardMini/index.tsx
Component Relationship
The following diagram illustrates how these components are used within the application, particularly on the detailed quote page.
This diagram shows that the Quote Page renders multiple StockCardMini components in its "Related Stocks" section. Both StockCard and StockCardMini are designed to navigate back to a Quote Page when clicked.
Sources: client/src/app/quote/[ticker]/page.tsx:142-148, client/src/components/StockCard/index.tsx:90, client/src/components/StockCardMini/index.tsx:69
StockCard Component
The StockCard component displays a stock's name, ticker, price change over the last day, and a small line chart visualizing the price movement.
Sources: client/src/components/StockCard/index.tsx
Properties
The component accepts the following props:
| Prop | Type | Description |
|---|---|---|
ticker | string | The stock ticker symbol (e.g., 'AAPL'). |
stockName | string | The full name of the stock. |
Sources: client/src/components/StockCard/index.tsx:18-21
Data Flow
On mount, the StockCard fetches 5-minute aggregate price data for the last 24 hours from the Polygon.io API. It then calculates the price and percentage change and uses the transformed data to render a line chart.
The data fetching process is as follows:
State Management
The component manages several state variables to handle its lifecycle:
| State | Type | Description |
|---|---|---|
data | StockDataPoint[] | An array of price points for the chart. |
priceChange | { value: number, percentage: number } | The calculated value and percentage change over the fetched time period. |
loading | boolean | Indicates if a data fetch is in progress. |
error | `string | null` |
Sources: client/src/components/StockCard/index.tsx:29-36
Rendering and Behavior
- The entire card is clickable and uses the
useRouterhook fromnext/navigationto redirect the user to the detailed quote page (/quote/{ticker}). - It uses the
rechartslibrary to render aLineChart. The line's color is set to#D4FF00. - The price change is colored green for positive values and red for negative values.
- Conditional rendering is used to display a loading message or an error message during data fetching.
Sources: client/src/components/StockCard/index.tsx:90-123
StockCardMini Component
The StockCardMini is a compact version that displays essential stock information: logo, ticker, name, current price, and market capitalization. It is used in the "Related Stocks" section of the quote page.
Sources: client/src/components/StockCardMini/index.tsx, client/src/app/quote/[ticker]/page.tsx:142-148
Properties
| Prop | Type | Description |
|---|---|---|
ticker | string | The stock ticker symbol (e.g., 'MSFT'). |
Sources: client/src/components/StockCardMini/index.tsx:8-10
Data Flow
The StockCardMini component makes two separate API calls to Polygon.io to gather all necessary information.
- Ticker Details: Fetches company information like name, market cap, and branding (for the logo).
- Previous Day's Price: Fetches the previous day's closing price.
This flow is visualized below:
State Management
| State | Type | Description |
|---|---|---|
stockInfo | `StockInfo | null` |
loading | boolean | Indicates if data fetching is in progress. |
error | `string | null` |
Sources: client/src/components/StockCardMini/index.tsx:16-19
Rendering and Behavior
- Like
StockCard, the component is clickable and navigates to/quote/{ticker}. - It displays the company logo if available, along with the ticker, name, and price.
- It calculates and displays a percentage change. Note: The calculation
((stockInfo.price - stockInfo.market_cap) / stockInfo.market_cap * 100)appears to be logically incorrect, as it compares the stock price to the total market capitalization.
// client/src/components/StockCardMini/index.tsx:73-75
<p className={`text-xs font-medium ${stockInfo.price >= 0 ? 'text-[#D4FF00]' : 'text-red-500'}`}>
{((stockInfo.price - stockInfo.market_cap) / stockInfo.market_cap * 100).toFixed(2)}%
</p>
- The market cap is displayed in billions (e.g.,
100B).
Sources: client/src/components/StockCardMini/index.tsx:68-82
Conclusion
The StockCard and StockCardMini components are fundamental building blocks for the Greenline UI, providing users with quick, digestible summaries of stock information. They effectively use the Polygon.io API to fetch real-time and reference data. While StockCard offers a visual representation of recent price history, StockCardMini is optimized for concise, high-density information display in lists. Both components enhance user experience by acting as interactive gateways to deeper financial analysis on the detailed quote pages.