Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:
This project is a full-stack technical analysis platform designed for financial market visualization and algorithmic trading strategy testing. It employs a monorepo structure consisting of a NestJS backend, a React frontend, and specialized internal packages for technical indicators and charting extensions.
The system facilitates real-time data streaming via WebSockets (GraphQL Subscriptions) to provide live updates for price candles and algorithmic trade alerts. It integrates external market data from sources like Binance, Tinkoff Invest, and TipRanks to provide a comprehensive analysis environment.
Sources: package.json:1-15, backend/package.json:34-45, frontend/package.json:7-25
System Architecture
The project follows a decoupled client-server architecture using GraphQL as the primary communication layer. The frontend is built with React and Apollo Client, while the backend utilizes the NestJS framework with TypeORM for persistence and Apollo Server for the GraphQL API.
High-Level Component Interaction
The following diagram illustrates the relationship between the major system components:
Frontend Architecture
The frontend is a React-based Single Page Application (SPA). It is structured around a centralized charting interface that leverages the klinecharts library for high-performance canvas rendering.
Key Frontend Technologies
| Technology | Usage |
|---|---|
| React (v17) | Core UI framework |
| Apollo Client | State management and GraphQL communication |
| KLineCharts | Canvas-based financial charting engine |
| Ant Design | UI component library for sidebars and forms |
| Styled Components | CSS-in-JS for layout and custom component styling |
Sources: frontend/package.json:7-25, frontend/src/App.tsx:1-25
Charting and Indicators Logic
The chart page (frontend/src/pages/chart/index.tsx) acts as the orchestrator for technical analysis. It initializes the chart instance and registers custom indicator templates (e.g., PMax, OTT, Williams VIX).
Backend Architecture
The backend is built with NestJS and provides a robust API for data retrieval and real-time streaming. It handles authentication (implicitly via SDKs), data persistence with SQLite, and integration with third-party financial providers.
API Specifications (GraphQL)
The backend exposes a comprehensive schema for managing technical analysis entities.
| Entity | Operations | Description |
|---|---|---|
| Candles | Query, Subscription | Fetches historical data and streams real-time updates |
| Indicators | Query, Mutation | Manages user-defined technical indicators and their settings |
| Shapes | Query, Mutation | Persists drawings (lines, marks) placed on charts |
| Instruments | Query, Mutation | Ticker search and watchlist management |
| AlgorithmTrade | Subscription | Streams alerts generated by automated trading logic |
Sources: frontend/graphql.schema.json:444-630, frontend/graphql.schema.json:761-900
Data Models and Relationships
The system manages relationships between financial instruments, user annotations (shapes), and technical configurations.
Specialized Packages
The repository includes internal packages to modularize core technical analysis logic:
- @aduryagin/technical-indicators: A TypeScript library providing implementations for standard and custom indicators (RSI, Bollinger Bands, PMax, etc.) with support for real-time updates of the latest candle.
- klinecharts: A lightweight canvas-based charting engine used for high-frequency data visualization.
Sources: packages/technical-indicators/package.json:1-15, packages/technical-indicators/readme.md:1-25, frontend/src/klinechart/package.json:1-20
Summary
The Technical Analysis project architecture prioritizes real-time performance and extensibility. By utilizing a GraphQL subscription model and a canvas-based charting engine, it provides a responsive interface for complex financial data visualization. The separation of technical indicator logic into a dedicated package allows for testing and reuse across the backend and frontend.