StockRating Component

Relevant source files

The following files were used as context for generating this wiki page:

• client/src/components/StockRating/index.tsx
• client/src/app/quote/[ticker]/page.tsx
• client/src/components/ui/progress.tsx
• client/src/components/ui/table.tsx
• client/src/components/ui/spinner.tsx
• client/src/components/ui/separator.tsx
• tailwind.config.ts

The StockRating component is a client-side React component designed to fetch and display a detailed financial rating analysis for a specific stock ticker. It presents an overall score and recommendation, a visual breakdown of analyst sentiment (Buy, Hold, Sell), and a table of individual metrics that contribute to the overall rating. This component is a key feature on the individual stock quote page, providing users with a quick yet comprehensive overview of a stock's valuation.

Sources: client/src/components/StockRating/index.tsx, client/src/app/quote/[ticker]/page.tsx:154

Architecture and Data Flow

The component is self-contained, managing its own state for loading, errors, and the fetched rating data. Upon mounting, it triggers an asynchronous data fetch based on the ticker prop it receives.

Sources: client/src/components/StockRating/index.tsx:41-66

Component State

StockRating utilizes React hooks to manage its internal state:

State Variable	Type	Description
ratingData	`RatingData	null`
loading	boolean	Tracks the loading state of the API request.
error	`string	null`

Sources: client/src/components/StockRating/index.tsx:43-45

Component Lifecycle

The following diagram illustrates the component's lifecycle from mounting to rendering the final UI.

Data Fetching

Data is fetched from the Financial Modeling Prep (FMP) API within a useEffect hook that runs whenever the ticker prop changes.

API Endpoint

• URL: https://financialmodelingprep.com/api/v3/rating/{ticker}
• Method: GET
• API Key: The key is hardcoded into the request URL.

The component expects an array of rating objects in the JSON response and uses the first element (data[0]) as its data source.

Sources: client/src/components/StockRating/index.tsx:50-53

Data Fetching Sequence

The sequence diagram below shows the interaction between the user, the application pages, and the external API.

Data Structure

The component relies on the RatingData interface to type the data received from the FMP API.

Field	Type	Description
symbol	string	The stock ticker symbol.
date	string	The date of the rating.
rating	string	The overall rating (e.g., "A", "B").
ratingScore	number	The overall numeric score (1-5).
ratingRecommendation	string	The overall recommendation (e.g., "Strong Buy").
ratingDetailsDCFScore	number	The score for Discounted Cash Flow.
ratingDetailsDCFRecommendation	string	The recommendation for DCF.
ratingDetailsROEScore	number	The score for Return on Equity.
ratingDetailsROERecommendation	string	The recommendation for ROE.
ratingDetailsROAScore	number	The score for Return on Assets.
ratingDetailsROARecommendation	string	The recommendation for ROA.
ratingDetailsDEScore	number	The score for Debt to Equity.
ratingDetailsDERecommendation	string	The recommendation for DE.
ratingDetailsPEScore	number	The score for Price to Earnings.
ratingDetailsPERecommendation	string	The recommendation for PE.
ratingDetailsPBScore	number	The score for Price to Book.
ratingDetailsPBRecommendation	string	The recommendation for PB.

Sources: client/src/components/StockRating/index.tsx:16-35

UI and Rendering

The component's UI is built using a combination of standard HTML and custom UI components from @/components/ui. It conditionally renders its content based on the loading and error states.

Loading and Error States

• Loading: While loading is true, a Spinner component is displayed.
• Error: If an error string is present or ratingData is null after the fetch, a message is displayed in red text.

Sources: client/src/components/StockRating/index.tsx:101-117

Styling and Color Logic

The component uses helper functions to apply dynamic colors based on scores and recommendations.

• getScoreColor(score): Returns a Tailwind CSS class for the score text color.
  • >= 4: text-[#D4FF00] (lime green)
  • >= 3: text-yellow-500
  • < 3: text-[#eb5757] (red)
• getRecommendationColor(recommendation): Returns a Tailwind CSS class for the recommendation text color.
  • "Strong Buy" / "Buy": text-[#D4FF00]
  • "Neutral": text-yellow-500
  • "Sell" / "Strong Sell": text-[#eb5757]

These specific hex colors are part of the application's design system and are used consistently for positive and negative indicators.

Sources: client/src/components/StockRating/index.tsx:67-90, client/tailwind.config.ts

Recommendation Breakdown

The getRecommendationCounts function calculates the percentage distribution of "buy", "hold", and "sell" recommendations across the six detailed metrics. These percentages are then visualized using three Progress bar components, each styled with a color corresponding to its category (lime for buy, yellow for hold, red for sell).

Sources: client/src/components/StockRating/index.tsx:120-140, client/src/components/StockRating/index.tsx:195-224

Detailed Metrics Table

The six core financial metrics (DCF, ROE, ROA, DE, PE, PB) are displayed in a Table component. Each row shows the metric's name, its score out of 5, and the associated recommendation. The colors for the score and recommendation text are determined by the getScoreColor and getRecommendationColor functions.

Sources: client/src/components/StockRating/index.tsx:163-168, client/src/components/StockRating/index.tsx:228-249

Integration

The StockRating component is designed to be used within the StockPage, which is the detailed view for a single ticker. It is placed towards the bottom of the page content, after the stock chart and summary sections.

It is instantiated with the ticker symbol, which is passed down as a prop from the page's parameters.

// client/src/app/quote/[ticker]/page.tsx

// ...
return (
  // ...
  <StockChart ticker={ticker} stockName={stockInfo.name} />
  <TickerChat ticker={ticker} />
  <StockSummary ticker={ticker} />
  // ...
  <StockRating ticker={ticker} />
  <NewsSection ticker={ticker} />
  // ...
)

Sources: client/src/app/quote/[ticker]/page.tsx:148-155