TradingView Ideas Integration
Relevant source files
The following files were used as context for generating this wiki page:
The TradingView Ideas Integration is a feature within the technical analysis terminal that scrapes and displays trading sentiment and community analysis for specific financial instruments. It provides users with social context by aggregating "ideas" (forecasts or educational content) directly from TradingView, categorizing them into sentiment types like Long, Short, or Education.
This system serves as a supplementary sentiment indicator alongside automated technical indicators and analyst ratings like TipRanks Info. The integration bridges the backend scraping service with a React-based frontend that visualizes distribution using bullet charts and detailed lists.
System Architecture and Data Flow
The integration follows a standard client-server pattern where the backend performs web scraping and the frontend consumes this data via a GraphQL API.
Backend Scraping Logic
The TradingViewService in the backend uses Axios to fetch symbol pages and cheerio to parse the HTML structure of TradingView. It specifically targets the .tv-feed-layout__card-item elements to extract metadata about each trading idea.
Frontend Visualization
The frontend utilizes the useTradingViewIdeasQuery hook to retrieve data. It processes the results into two main views: a statistical distribution chart and a scrollable list of individual ideas.
Data Models and Types
The integration relies on a structured TradingViewIdea type defined in both the GraphQL schema and the backend service.
TradingViewIdea Entity
| Field | Type | Description |
|---|---|---|
title | String | The headline of the trading idea. |
link | String | URL to the full idea on TradingView. |
timeframe | String | The trading interval (e.g., 1D, 4H) associated with the idea. |
type | String | Category: "Long", "Short", "Education", or "" (Neutral). |
date | String | Formatted date string (e.g., "5 Oct"). |
pureDate | String/Date | ISO timestamp used for sorting logic. |
likes | Float | Number of social likes/agreements. |
comments | Float | Number of community comments. |
Sources: frontend/src/graphql.ts:167-176, frontend/graphql.schema.json:712-800
Implementation Details
Sentiment Distribution Visualization
The component uses @antv/g2plot to render a Bullet chart that visualizes the ratio of different idea types. The percentages are calculated by filtering the raw data array.
- Red: Short ideas
- Yellow: Neutral ideas
- Blue: Educational ideas
- Green: Long ideas
Sources: frontend/src/pages/chart/components/TradingViewIdeas.tsx:43-100
Backend Scraping Implementation
The backend uses a specific selector logic to identify data points within the TradingView DOM:
- Link:
.tv-widget-idea__title-row a - Type:
.tv-idea-label - Timestamp:
.tv-card-stats__time(attributedata-timestamp) - Social Stats:
.tv-card-social-item__count
Sources: backend/src/modules/tradingview/tradingview.service.ts:22-44
Dependencies
| Library | Scope | Purpose |
|---|---|---|
cheerio | Backend | Server-side jQuery implementation for HTML parsing. |
axios | Backend | HTTP client for fetching external web pages. |
@antv/g2plot | Frontend | Charting library for the sentiment bullet plot. |
antd | Frontend | UI framework for the List and List.Item components. |
@apollo/client | Frontend | GraphQL client for data fetching. |
Sources: backend/package.json:33-35, frontend/package.json:7-14
Summary
The TradingView Ideas Integration provides a real-time social sentiment layer to the technical analysis platform. By scraping community-generated forecasts and educational content, it allows users to compare their algorithmic results with broader market opinions. The system is robustly typed via GraphQL and uses efficient DOM parsing on the backend to avoid the overhead of a full browser environment.