Watchlist Management
Relevant source files
The following files were used as context for generating this wiki page:
The Watchlist Management system provides users with the ability to track specific financial instruments in real-time. It allows for searching, adding, and removing tickers from a monitored list, while providing live updates on price movements and percentage changes. The system integrates closely with the charting interface to allow quick navigation between different stock assets.
Sources: frontend/src/pages/chart/components/WatchList.tsx, backend/src/modules/watchList/watchList.resolver.ts
System Architecture
The watchlist system follows a real-time reactive architecture using GraphQL Subscriptions. The backend maintains a list of instruments and pushes updates to the frontend whenever price data changes or the list is modified.
Data Flow for Real-time Updates
- Subscription: The frontend establishes a
watchListsubscription. - Streaming: The backend uses a
PubSubmechanism to broadcast the entire watchlist when updates occur. - Calculation: The backend calculates
pricePercentChangebased on the difference between the daily open price and the current close price.
The diagram shows how the backend streams market data from the Tinkoff API, processes it, and pushes it to the UI.
Sources: backend/src/modules/watchList/watchList.resolver.ts:38-66, frontend/src/graphql.ts:474-482
Component Overview
Frontend Components
The watchlist UI is divided into two primary functional components:
| Component | Description |
|---|---|
WatchList | The main container that handles instrument search, the watch mutation, and renders the list of items. |
WatchListItem | Renders individual row data including ticker, price, and percentage change. It also provides links to external analysis tools like TradingView and TipRanks. |
Sources: frontend/src/pages/chart/components/WatchList.tsx:13-15, frontend/src/pages/chart/components/WatchListItem.tsx:16-19
Backend Operations
The WatchListResolver manages the lifecycle of watched instruments through three primary GraphQL operations:
- Mutation
watch: Adds a new instrument to the database and initiates price tracking. - Mutation
unwatch: Removes an instrument and stops associated price streams. - Subscription
watchList: Maintains an open connection to stream price updates to the client.
Sources: backend/src/modules/watchList/watchList.resolver.ts:114-138, frontend/src/graphql.ts:79-87
Data Structures and API
GraphQL Schema
The Instrument type is the core data structure used throughout the watchlist.
export type Instrument = {
__typename?: 'Instrument';
figi: Scalars['String'];
id?: Maybe<Scalars['Float']>;
price?: Maybe<Scalars['Float']>;
pricePercentChange?: Maybe<Scalars['Float']>;
ticker: Scalars['String'];
};
Sources: frontend/src/graphql.ts:60-66
API Operations Table
| Operation | Type | Input/Parameters | Purpose |
|---|---|---|---|
watch | Mutation | WatchInput (ticker, figi) | Adds a ticker to the active monitor list. |
unwatch | Mutation | id (Float) | Removes a ticker from the monitor list. |
searchInstrument | Query | ticker (String) | Searches for instrument details by ticker symbol. |
watchList | Subscription | None | Returns an array of Instrument objects with live prices. |
Sources: frontend/src/graphql.ts:87-111, backend/src/modules/watchList/watchList.resolver.ts:114-138
Implementation Details
Price Change Logic
The backend calculates the volatility of an asset by comparing the current close price to the initial daily open price fetched via the Tinkoff API.
const onePercent = open / 100;
const priceDiff = close - open;
const percentDiff = priceDiff / onePercent;
// Returns percentDiff as pricePercentChange
Sources: backend/src/modules/watchList/watchList.resolver.ts:71-74
User Interactions
When a user selects an item in the WatchList, the onTickerSelect callback is triggered. This updates the browser URL parameters (ticker, figi, interval) and refreshes the chart data without a full page reload.
External Integrations
The WatchListItem component provides quick-access buttons for external research:
- TradingView: Links to
https://www.tradingview.com/symbols/{ticker}and displays ideas in a Popover. - TipRanks: Links to
https://www.tipranks.com/stocks/{ticker}and displays analyst info in a Popover.
Sources: frontend/src/pages/chart/components/WatchListItem.tsx:40-62
Summary
Watchlist Management acts as the central navigation and monitoring hub for the application. By leveraging GraphQL subscriptions and the Tinkoff API, it provides real-time price feedback and serves as the primary interface for switching between different financial assets on the main chart.
Sources: backend/src/modules/watchList/watchList.resolver.ts, frontend/src/pages/chart/index.tsx