StockChart Component

Relevant source files

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

• client/src/components/StockChart/index.tsx
• client/src/app/quote/[ticker]/page.tsx
• client/package.json
• client/src/components/StockSummary/index.tsx
• client/src/components/StockCard/index.tsx
• client/src/components/TickerChat/index.tsx

The StockChart is a client-side React component responsible for rendering a dynamic and interactive area chart of a stock's price over time. It fetches historical data from the Polygon.io API and leverages the recharts library for visualization. The component supports various time windows, from intraday to multi-year views.

A key feature of this component is its ability to generate and display a short-term price forecast by communicating with a local backend service. It is a central element of the stock quote page, providing users with a detailed visual representation of price movements.

Sources: client/src/components/StockChart/index.tsx, client/src/app/quote/[ticker]/page.tsx:4,142

Component Overview

The component is designed to be self-contained, managing its own data fetching, state, and rendering logic based on the ticker prop.

Sources: client/src/components/StockChart/index.tsx

Properties

The StockChart component accepts the following props:

Prop	Type	Description	Source
ticker	string	The stock ticker symbol (e.g., "AAPL").	client/src/components/StockChart/index.tsx:43
stockName	string	The name of the stock/company.	client/src/components/StockChart/index.tsx:44, client/src/app/quote/[ticker]/page.tsx:142

State Management

The component manages its internal state to handle UI updates, data, and loading/error conditions.

State Variable	Type	Description	Source
data	StockDataPoint[]	An array of data points for rendering the chart.	client/src/components/StockChart/index.tsx:58
timeWindow	TimeWindow	The currently selected time frame (e.g., '1D', '1M', '1Y'). Default is '1D'.	client/src/components/StockChart/index.tsx:59
loading	boolean	Indicates if historical data is being fetched.	client/src/components/StockChart/index.tsx:60
error	string | null	Stores any error message from data fetching.	client/src/components/StockChart/index.tsx:61
isForecasting	boolean	Indicates if a forecast is being generated.	client/src/components/StockChart/index.tsx:62
showForecast	boolean	Controls the visibility of the forecasted data on the chart.	client/src/components/StockChart/index.tsx:63
priceChange	{ value: number; percentage: number }	The price change over the selected timeWindow.	client/src/components/StockChart/index.tsx:64

Key Dependencies

The component relies on several external libraries and internal UI components.

Dependency	Usage	Source
recharts	Core library for rendering the area chart and its elements.	client/package.json:20
date-fns	For parsing and formatting date strings for the chart's axes and tooltip.	client/package.json:14
Spinner	Custom UI component to indicate loading states.	client/src/components/StockChart/index.tsx:12
Skeleton	Custom UI component for placeholder loading UI.	client/src/components/StockChart/index.tsx:13
Button	Custom UI component for user interaction (time window, forecast).	client/src/components/StockChart/index.tsx:11

Data Flow and Fetching

The component's primary responsibility is to fetch and process data for visualization. This involves fetching historical data from Polygon.io and optionally generating a forecast via a local backend.

Historical Data Fetching

The process begins when the component mounts or when a user selects a new time window.

This diagram illustrates the sequence of events for fetching historical stock data.

The getPolygonData function constructs the API request URL based on the selected timeWindow. The multiplier and timespan parameters are adjusted accordingly.

Time Window	Multiplier	Timespan
1D, 5D	'5'	'minute'
1M - MAX	'1'	'day'
Sources: client/src/components/StockChart/index.tsx:147-149

The raw response from Polygon.io is then processed by transformData into the StockDataPoint format required by the chart.

// client/src/components/StockChart/index.tsx:37-41
interface StockDataPoint {
  date: string;
  price: number;
  isForecast?: boolean;
  confidenceLower?: number;
  confidenceUpper?: number;
}

Sources: client/src/components/StockChart/index.tsx:37-41, 91-100

Forecasting Feature

The component includes a forecasting feature that communicates with a local backend service running on http://localhost:8000. This is triggered by the user clicking the "Forecast" button, which is only visible for '1D' and '5D' time windows.

This diagram shows the data flow for the forecasting feature.

The request body sent to the forecast endpoint contains the historical data, and the expected response includes forecasted dates, prices, and confidence intervals.

// client/src/components/StockChart/index.tsx:46-56
interface ForecastResponse {
  historical_dates: string[];
  historical_prices: number[];
  forecast_dates: string[];
  forecast_prices: number[];
  confidence_intervals: { lower: number; upper: number }[];
  metrics: {
    mae: number;
    mape: number;
    validation_period: string;
  };
}

Sources: client/src/components/StockChart/index.tsx:46-56

Rendering and UI

The component uses the recharts library to render the chart and provides several UI controls for interaction.

Chart Rendering

• ResponsiveContainer: Ensures the chart fills its parent container.
• AreaChart: The main chart component.
• Area: Renders the price line and the gradient-filled area below it. The color of the line and gradient is determined dynamically by the priceChange (green/yellow for positive, red for negative).
• defs and linearGradient: An SVG gradient (dataGradient) is defined to create the fill effect under the price line. Its color is set by the getChartColors function.
• XAxis and YAxis: Both axes are hidden to maintain a clean look, but they are used internally for scaling.
• Tooltip: A CustomTooltip component is used to display the precise date and price when a user hovers over the chart.

Sources: client/src/components/StockChart/index.tsx:71-84, 239-262

UI Controls

• Time Window Buttons: A series of buttons for 1D, 5D, 1M, 6M, YTD, 1Y, 5Y, and MAX allow the user to change the timeWindow state, which triggers a new data fetch.
• Forecast Button: This button, decorated with a stock icon, triggers the getForecast function. It is disabled and shows a spinner while a forecast is being generated. It is only visible for the '1D' and '5D' time windows.

Sources: client/src/components/StockChart/index.tsx:192-211, 212-222

Loading and Error States

• Loading: While loading is true, a Spinner component is displayed in the center of the chart area. The initial price display also uses a Skeleton component before the first data fetch is complete.
• Error: If the error state is not null, an error message is displayed in red text within the chart area.

Sources: client/src/components/StockChart/index.tsx:184-190, 223-231

Conclusion

The StockChart component is a sophisticated and crucial part of the Greenline application's user interface. It provides a rich, interactive visualization of stock data by fetching from the Polygon.io API and rendering with recharts. Its support for multiple time windows and an integrated machine learning-powered forecasting feature make it a powerful tool for market analysis. The component's internal state management ensures a responsive and clear user experience, handling loading and error states gracefully.