Indicator Configuration Forms
Relevant source files
The following files were used as context for generating this wiki page:
Indicator Configuration Forms provide the user interface for managing technical indicators on financial charts. This system enables users to select, add, remove, and fine-tune calculation parameters for a variety of technical analysis tools. The configuration system bridges the gap between the visual chart library and the backend data storage.
The forms are primarily built using React and Ant Design, integrating with a GraphQL backend to persist user settings and a specialized KLineChart library for rendering.
Sources: frontend/src/pages/chart/components/Indicators.tsx:243-305, frontend/src/pages/chart/components/IndicatorSettingsForm.tsx:13-25
Component Architecture and UI Flow
The indicator management interface is divided into two main parts: the indicator selector and the active indicator list. Users select new indicators from a grouped list, which triggers a mutation to save the indicator to their profile and an action to render it on the chart.
Each active indicator is presented within a collapsible panel containing an IndicatorSettingsForm. This form dynamically generates input fields based on the specific indicator's metadata, such as labels and default calculation parameters.
User Interaction Flow
The following diagram illustrates the process of adding and modifying an indicator:
The flow ensures that UI changes are reflected immediately on the chart while simultaneously being persisted to the database.
Sources: frontend/src/pages/chart/components/Indicators.tsx:255-288, frontend/src/pages/chart/components/IndicatorSettingsForm.tsx:28-44
Data Structure and Models
Indicators are defined by a combination of templates and dynamic settings. The INDICATORS constant maps internal keys to their respective templates, labels, and UI configuration options.
Indicator Properties
| Property | Type | Description |
|---|---|---|
label | string | Display name in the UI |
paneId | string | null | The ID of the chart pane where the indicator is rendered |
calcParamsLabels | string[] | Human-readable labels for calculation parameters |
options | object | Rendering options (e.g., target pane ID, height) |
settings | number[] | Persistent calculation values retrieved from GraphQL |
Sources: frontend/src/pages/chart/components/Indicators.tsx:24-60, frontend/src/graphql.ts:79-84
GraphQL Integration
The system uses GraphQL mutations to manage the state of active indicators.
export type UpdateIndicatorInput = {
id: Scalars['Float'];
settings: Array<Scalars['Float']>;
};
// Used in IndicatorSettingsForm.tsx
const [updateSettings] = useUpdateIndicatorMutation({
onError: notification.error,
});
Sources: frontend/src/graphql.ts:213-216, frontend/src/pages/chart/components/IndicatorSettingsForm.tsx:15-17
Calculation Parameter Management
The IndicatorSettingsForm component is responsible for translating the calcParams array of an indicator template into a functional form.
Dynamic Form Generation
The form iterates through the calcParams defined in the indicator's template. If an indicator has specific labels defined in calcParamsLabels, those are used; otherwise, it defaults to "Param [index]". It also handles decimal precision via the allowDecimal property of the parameter configuration.
Reset Mechanism
The configuration form includes a "Reset Settings" button. This action retrieves the hardcoded default values from the INDICATORS template, resets the form fields, notifies the chart instance to revert its state, and synchronizes the reset values back to the server.
Sources: frontend/src/pages/chart/components/IndicatorSettingsForm.tsx:61-90
Indicator Categorization
To improve usability, indicators are grouped into logical categories within the selection dropdown.
| Category | Indicators Included |
|---|---|
| Directional Movement | BBI, DMA, DMI, EMA, MA, MACD, SMA, TRIX |
| Momentum | BRAR, MTM, PSY, ROC, VR |
| Oscillators | AO, BIAS, RSI, KDJ, WR |
| Volatility | BOLL, SAR |
| Volume | VOL, PVT, OBV |
| Custom | WVX, PMAX, OTT, RSTP, PMAXRSI, VWAP, SVOL |
Sources: frontend/src/pages/chart/components/Indicators.tsx:189-234
Technical Indicator Templates
Templates define how an indicator is calculated and plotted. They can perform calculations locally, via Web Workers, or by calling an external Python-based calculation service.
Calculation Modes
- External API: The
VWAPindicator sends candle data to${config.python}/indicator-calculatorfor processing. - Worker-based: Indicators like
Williams VIX(WVX) use aWorkerto handle intensive calculations off the main thread. - Local/Standard: Standard indicators (MA, SMA) use the built-in extensions from the chart library.
Sources: frontend/src/pages/chart/indicatorsTemplates/vwap.ts:16-30, frontend/src/pages/chart/indicatorsTemplates/williamsVix.ts:39-53, frontend/src/klinechart/types/TechnicalIndicator.d.ts:68-79
The configuration forms serve as the control plane for these underlying technical templates, ensuring user-defined parameters are correctly passed to the calcTechnicalIndicator functions during the chart rendering cycle.
Sources: frontend/src/pages/chart/indicatorsTemplates/volume.ts:63-75