Technical Indicators Library
Relevant source files
The following files were used as context for generating this wiki page:
- packages/technical-indicators/package.json
- packages/technical-indicators/readme.md
- frontend/src/klinechart/types/TechnicalIndicator.d.ts
- frontend/src/pages/chart/components/Indicators.tsx
- frontend/src/klinechart/src/component/technicalindicator/TechnicalIndicator.js
- frontend/src/pages/chart/indicatorsTemplates/volume.ts
- frontend/src/pages/chart/indicatorsTemplates/williamsVix.ts
The Technical Indicators Library is a specialized module designed for calculating and visualizing financial market data. Its primary purpose is to provide a robust framework for technical analysis, supporting real-time updates which are essential for streaming data via WebSockets. The library is integrated into the frontend charting system to render various overlays and oscillators on candlestick charts.
Sources: packages/technical-indicators/package.json:4-6, packages/technical-indicators/readme.md:4-6
Architecture and Components
The system is built around a template-based architecture where each indicator is defined by a TechnicalIndicatorTemplate. This structure separates the mathematical calculation logic from the visual representation. Calculations can be performed synchronously, asynchronously via Web Workers, or through remote API calls to external computation engines.
Data Flow for Calculations
Indicator data flows from the raw K-line (candle) data through a calculation function, which then updates the chart's internal state. For performance-heavy indicators like Williams VIX or Heatmap Volume, the system offloads work to background processes.
The diagram shows how K-line data is processed through different execution paths depending on the indicator template definition.
Sources: frontend/src/pages/chart/indicatorsTemplates/williamsVix.ts:32-49, frontend/src/pages/chart/indicatorsTemplates/volume.ts:71-97
Technical Indicator Templates
Templates define how an indicator behaves, its default parameters, and how it should be rendered. Key interfaces include TechnicalIndicator for metadata and TechnicalIndicatorTemplate for execution logic.
Core Attributes
| Attribute | Type | Description |
|---|---|---|
name | string | Unique identifier for the indicator. |
calcParams | Array | Default parameters (e.g., periods, multipliers). |
series | string | Category: 'price', 'volume', or 'normal'. |
plots | Array | Defines specific lines, bars, or circles to draw. |
precision | number | Decimal places for calculated values. |
Sources: frontend/src/klinechart/types/TechnicalIndicator.d.ts:44-71, frontend/src/klinechart/src/component/technicalindicator/TechnicalIndicator.js:77-111
Execution Logic Methods
- calcTechnicalIndicator: The core method receiving
kLineDataListand returning an array of results. - regeneratePlots: Optional method to dynamically update visual plots when parameters change.
- render: A custom draw function for complex visualizations using the HTML5 Canvas context.
Sources: frontend/src/klinechart/types/TechnicalIndicator.d.ts:66-71, frontend/src/klinechart/src/component/technicalindicator/TechnicalIndicator.js:218-223
Supported Indicators
The library includes a wide range of standard and custom indicators, categorized by their market analysis function.
Categorization
| Group | Indicators |
|---|---|
| Directional | BBI, DMA, DMI, EMA, MA, MACD, SMA, TRIX |
| Momentum | BRAR, MTM, PSY, ROC, VR |
| Oscillators | AO, BIAS, RSI, KDJ, WR |
| Volatility | ATR, BOLL, SAR, Standard Deviation |
| Volume | VOL, PVT, OBV, SVOL (Heatmap Volume), VWAP |
| Custom | Williams VIX (WVX), OTT, PMax, PMAXRSI, RSI+Stoch TP |
Sources: packages/technical-indicators/readme.md:9-31, frontend/src/pages/chart/components/Indicators.tsx:189-236
Implementation Details
Real-time Updates
The library is specifically designed to handle "last candle" updates. This allows the system to recalculate only the most recent data point when a trade occurs within the current time interval, rather than re-processing the entire historical array.
const rsi = RSI({ candles, period });
// Update the last result item when a new price arrives
const rsiResult = rsi.update({ time: 2, close: 1 });
Sources: packages/technical-indicators/readme.md:43-58
Rendering Customizations
Indicators can define dynamic styling. For example, the Volume Heatmap changes bar colors based on calculated thresholds (extra high, high, medium, normal).
The flow demonstrates the conditional styling logic used in the plots configuration of custom indicators.
Sources: frontend/src/pages/chart/indicatorsTemplates/volume.ts:31-48
Conclusion
The Technical Indicators Library serves as the computational backbone for the project's trading charts. By providing a standardized interface for both internal JavaScript-based calculations and external worker/API integrations, it ensures high-performance analysis across a diverse set of financial metrics. its focus on real-time update capabilities makes it suitable for live trading environments.