feat: Add ML prediction overlay components for trading charts
Add complete implementation of ML overlay components: - MLPredictionOverlay: Renders ML price predictions as line overlay - SignalMarkers: Displays BUY/SELL signal markers on chart - ICTConceptsOverlay: Renders Order Blocks, FVG, and Liquidity zones - useMlOverlayData: Custom hook with TanStack Query for data fetching - mlOverlay.types.ts: Type definitions for all ML overlay data Features: - Uses lightweight-charts API for efficient rendering - Automatic caching with 60s stale time - Configurable colors and visibility - Clean up on component unmount - Full TypeScript support Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
261dc4c71c
commit
d3f4aa3385
91
src/hooks/charts/useMlOverlayData.ts
Normal file
91
src/hooks/charts/useMlOverlayData.ts
Normal file
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* useMlOverlayData Hook
|
||||
* Custom hook for fetching and caching ML overlay data for trading charts
|
||||
* Uses TanStack Query for efficient data fetching and caching
|
||||
*/
|
||||
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import type {
|
||||
MLPrediction,
|
||||
SignalMarker,
|
||||
ICTConcept,
|
||||
MLPredictionResponse,
|
||||
} from '../../types/mlOverlay.types';
|
||||
|
||||
// ============================================================================
|
||||
// Constants
|
||||
// ============================================================================
|
||||
|
||||
const ML_API_URL = import.meta.env.VITE_ML_URL || 'http://localhost:3083';
|
||||
const STALE_TIME = 60000; // 60 seconds
|
||||
const CACHE_TIME = 300000; // 5 minutes
|
||||
|
||||
// ============================================================================
|
||||
// API Functions
|
||||
// ============================================================================
|
||||
|
||||
async function fetchMLPredictions(
|
||||
symbol: string,
|
||||
timeframe: string
|
||||
): Promise<MLPredictionResponse> {
|
||||
const response = await fetch(
|
||||
`${ML_API_URL}/api/ml/predictions/${symbol}/${timeframe}`
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch ML predictions: ${response.statusText}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Hook
|
||||
// ============================================================================
|
||||
|
||||
export interface UseMlOverlayDataOptions {
|
||||
symbol: string;
|
||||
timeframe: string;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export interface UseMlOverlayDataResult {
|
||||
predictions: MLPrediction[];
|
||||
signals: SignalMarker[];
|
||||
ictConcepts: ICTConcept[];
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
refetch: () => void;
|
||||
}
|
||||
|
||||
export function useMlOverlayData({
|
||||
symbol,
|
||||
timeframe,
|
||||
enabled = true,
|
||||
}: UseMlOverlayDataOptions): UseMlOverlayDataResult {
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
queryKey: ['ml-predictions', symbol, timeframe],
|
||||
queryFn: () => fetchMLPredictions(symbol, timeframe),
|
||||
staleTime: STALE_TIME,
|
||||
gcTime: CACHE_TIME,
|
||||
enabled,
|
||||
retry: 2,
|
||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
|
||||
});
|
||||
|
||||
return {
|
||||
predictions: data?.predictions || [],
|
||||
signals: data?.signals || [],
|
||||
ictConcepts: data?.ictConcepts || [],
|
||||
isLoading,
|
||||
error: error as Error | null,
|
||||
refetch,
|
||||
};
|
||||
}
|
||||
|
||||
export default useMlOverlayData;
|
||||
@ -0,0 +1,134 @@
|
||||
/**
|
||||
* ICTConceptsOverlay Component
|
||||
* Renders ICT concepts (Order Blocks, FVG, Liquidity) as rectangles on the chart
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { IChartApi, ISeriesApi, Time } from 'lightweight-charts';
|
||||
import type { ICTConcept } from '../../../../../types/mlOverlay.types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface ICTConceptsOverlayProps {
|
||||
chartRef: React.RefObject<IChartApi>;
|
||||
ictConcepts: ICTConcept[];
|
||||
visible?: boolean;
|
||||
colors?: {
|
||||
OrderBlock: string;
|
||||
FVG: string;
|
||||
Liquidity: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface RectangleData {
|
||||
time: Time;
|
||||
value: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Default Colors
|
||||
// ============================================================================
|
||||
|
||||
const DEFAULT_COLORS = {
|
||||
OrderBlock: 'rgba(59, 130, 246, 0.3)', // Blue
|
||||
FVG: 'rgba(251, 191, 36, 0.3)', // Yellow
|
||||
Liquidity: 'rgba(249, 115, 22, 0.3)', // Orange
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export const ICTConceptsOverlay: React.FC<ICTConceptsOverlayProps> = ({
|
||||
chartRef,
|
||||
ictConcepts,
|
||||
visible = true,
|
||||
colors = DEFAULT_COLORS,
|
||||
}) => {
|
||||
const conceptSeriesRef = useRef<Map<string, ISeriesApi<'Area'>>>(new Map());
|
||||
|
||||
// Initialize series for each ICT concept
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || !visible) return;
|
||||
|
||||
const chart = chartRef.current;
|
||||
const seriesMap = new Map<string, ISeriesApi<'Area'>>();
|
||||
|
||||
// Create series for each concept type
|
||||
ictConcepts.forEach((concept, index) => {
|
||||
const conceptId = `${concept.type}-${index}`;
|
||||
|
||||
if (!conceptSeriesRef.current.has(conceptId)) {
|
||||
const color = colors[concept.type] || DEFAULT_COLORS[concept.type];
|
||||
|
||||
const series = chart.addAreaSeries({
|
||||
topColor: color,
|
||||
bottomColor: color,
|
||||
lineColor: color.replace('0.3', '0.8'),
|
||||
lineWidth: 1,
|
||||
crosshairMarkerVisible: false,
|
||||
lastValueVisible: false,
|
||||
priceLineVisible: false,
|
||||
title: `${concept.type}`,
|
||||
});
|
||||
|
||||
seriesMap.set(conceptId, series);
|
||||
}
|
||||
});
|
||||
|
||||
conceptSeriesRef.current = seriesMap;
|
||||
|
||||
return () => {
|
||||
// Cleanup: remove all series
|
||||
conceptSeriesRef.current.forEach((series) => {
|
||||
chart.removeSeries(series);
|
||||
});
|
||||
conceptSeriesRef.current.clear();
|
||||
};
|
||||
}, [chartRef, ictConcepts, ictConcepts.length, visible, colors]);
|
||||
|
||||
// Update concept data
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || !visible || ictConcepts.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
ictConcepts.forEach((concept, index) => {
|
||||
const conceptId = `${concept.type}-${index}`;
|
||||
const series = conceptSeriesRef.current.get(conceptId);
|
||||
|
||||
if (!series) return;
|
||||
|
||||
// Create rectangle data
|
||||
const timeStart = (concept.timeStart / 1000) as Time;
|
||||
const timeEnd = (concept.timeEnd / 1000) as Time;
|
||||
|
||||
const rectangleData: RectangleData[] = [
|
||||
{ time: timeStart, value: concept.priceTop },
|
||||
{ time: timeStart, value: concept.priceBottom },
|
||||
{ time: timeEnd, value: concept.priceBottom },
|
||||
{ time: timeEnd, value: concept.priceTop },
|
||||
{ time: timeStart, value: concept.priceTop },
|
||||
];
|
||||
|
||||
series.setData(rectangleData);
|
||||
});
|
||||
}, [chartRef, ictConcepts, visible]);
|
||||
|
||||
// Update visibility
|
||||
useEffect(() => {
|
||||
if (!chartRef.current) return;
|
||||
|
||||
conceptSeriesRef.current.forEach((series) => {
|
||||
series.applyOptions({
|
||||
visible,
|
||||
});
|
||||
});
|
||||
}, [chartRef, visible]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default ICTConceptsOverlay;
|
||||
@ -0,0 +1,95 @@
|
||||
/**
|
||||
* MLPredictionOverlay Component
|
||||
* Renders ML price predictions as a line overlay on the trading chart
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { IChartApi, ISeriesApi, LineData, Time } from 'lightweight-charts';
|
||||
import type { MLPrediction } from '../../../../../types/mlOverlay.types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface MLPredictionOverlayProps {
|
||||
chartRef: React.RefObject<IChartApi>;
|
||||
predictions: MLPrediction[];
|
||||
visible?: boolean;
|
||||
lineColor?: string;
|
||||
lineWidth?: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export const MLPredictionOverlay: React.FC<MLPredictionOverlayProps> = ({
|
||||
chartRef,
|
||||
predictions,
|
||||
visible = true,
|
||||
lineColor = '#3b82f6',
|
||||
lineWidth = 2,
|
||||
}) => {
|
||||
const predictionSeriesRef = useRef<ISeriesApi<'Line'> | null>(null);
|
||||
|
||||
// Initialize prediction line series
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || !visible) return;
|
||||
|
||||
const chart = chartRef.current;
|
||||
|
||||
// Create line series for predictions
|
||||
const predictionSeries = chart.addLineSeries({
|
||||
color: lineColor,
|
||||
lineWidth: lineWidth as 1 | 2 | 3 | 4,
|
||||
lineStyle: 0,
|
||||
crosshairMarkerVisible: true,
|
||||
crosshairMarkerRadius: 6,
|
||||
crosshairMarkerBorderColor: lineColor,
|
||||
crosshairMarkerBackgroundColor: lineColor,
|
||||
lastValueVisible: true,
|
||||
priceLineVisible: true,
|
||||
title: 'ML Prediction',
|
||||
});
|
||||
|
||||
predictionSeriesRef.current = predictionSeries;
|
||||
|
||||
return () => {
|
||||
if (predictionSeriesRef.current) {
|
||||
chart.removeSeries(predictionSeriesRef.current);
|
||||
predictionSeriesRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [chartRef, visible, lineColor, lineWidth]);
|
||||
|
||||
// Update prediction data
|
||||
useEffect(() => {
|
||||
if (!predictionSeriesRef.current || !visible || predictions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert predictions to line data
|
||||
const lineData: LineData[] = predictions.map((pred) => ({
|
||||
time: (pred.timestamp / 1000) as Time,
|
||||
value: pred.price,
|
||||
}));
|
||||
|
||||
// Sort by time (required by lightweight-charts)
|
||||
lineData.sort((a, b) => (a.time as number) - (b.time as number));
|
||||
|
||||
predictionSeriesRef.current.setData(lineData);
|
||||
}, [predictions, visible]);
|
||||
|
||||
// Update visibility
|
||||
useEffect(() => {
|
||||
if (!predictionSeriesRef.current) return;
|
||||
|
||||
predictionSeriesRef.current.applyOptions({
|
||||
visible,
|
||||
});
|
||||
}, [visible]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default MLPredictionOverlay;
|
||||
154
src/modules/trading/components/charts/overlays/README.md
Normal file
154
src/modules/trading/components/charts/overlays/README.md
Normal file
@ -0,0 +1,154 @@
|
||||
# ML Chart Overlays
|
||||
|
||||
Componentes de React para visualizar predicciones ML en gráficos de trading usando lightweight-charts.
|
||||
|
||||
## Componentes
|
||||
|
||||
### 1. MLPredictionOverlay
|
||||
Renderiza predicciones de precio ML como una línea sobre el gráfico.
|
||||
|
||||
**Props:**
|
||||
- `chartRef`: Referencia al chart de lightweight-charts
|
||||
- `predictions`: Array de predicciones ML
|
||||
- `visible`: Mostrar/ocultar overlay (default: true)
|
||||
- `lineColor`: Color de la línea (default: '#3b82f6')
|
||||
- `lineWidth`: Grosor de línea (default: 2)
|
||||
|
||||
### 2. SignalMarkers
|
||||
Renderiza marcadores de señales BUY/SELL en el gráfico.
|
||||
|
||||
**Props:**
|
||||
- `chartRef`: Referencia al chart de lightweight-charts
|
||||
- `candleSeriesRef`: Referencia a la serie de velas
|
||||
- `signals`: Array de señales
|
||||
- `visible`: Mostrar/ocultar markers (default: true)
|
||||
|
||||
### 3. ICTConceptsOverlay
|
||||
Renderiza conceptos ICT (Order Blocks, FVG, Liquidity) como rectángulos.
|
||||
|
||||
**Props:**
|
||||
- `chartRef`: Referencia al chart de lightweight-charts
|
||||
- `ictConcepts`: Array de conceptos ICT
|
||||
- `visible`: Mostrar/ocultar overlay (default: true)
|
||||
- `colors`: Objeto con colores por tipo de concepto
|
||||
|
||||
## Hook
|
||||
|
||||
### useMlOverlayData
|
||||
Hook personalizado para obtener datos ML desde el backend con caché automático.
|
||||
|
||||
**Opciones:**
|
||||
- `symbol`: Símbolo del activo (ej: 'EURUSD')
|
||||
- `timeframe`: Temporalidad (ej: '1h', '4h')
|
||||
- `enabled`: Activar/desactivar fetch (default: true)
|
||||
|
||||
**Retorna:**
|
||||
- `predictions`: Array de predicciones
|
||||
- `signals`: Array de señales
|
||||
- `ictConcepts`: Array de conceptos ICT
|
||||
- `isLoading`: Estado de carga
|
||||
- `error`: Error si existe
|
||||
- `refetch`: Función para refetch manual
|
||||
|
||||
## Ejemplo de Uso
|
||||
|
||||
```tsx
|
||||
import { useRef } from 'react';
|
||||
import { IChartApi, ISeriesApi } from 'lightweight-charts';
|
||||
import { useMlOverlayData } from '@/hooks/charts/useMlOverlayData';
|
||||
import {
|
||||
MLPredictionOverlay,
|
||||
SignalMarkers,
|
||||
ICTConceptsOverlay,
|
||||
} from '@/modules/trading/components/charts/overlays';
|
||||
|
||||
function TradingChart() {
|
||||
const chartRef = useRef<IChartApi>(null);
|
||||
const candleSeriesRef = useRef<ISeriesApi<'Candlestick'>>(null);
|
||||
|
||||
const { predictions, signals, ictConcepts, isLoading } = useMlOverlayData({
|
||||
symbol: 'EURUSD',
|
||||
timeframe: '1h',
|
||||
});
|
||||
|
||||
if (isLoading) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Tu componente de chart aquí */}
|
||||
|
||||
<MLPredictionOverlay
|
||||
chartRef={chartRef}
|
||||
predictions={predictions}
|
||||
visible={true}
|
||||
/>
|
||||
|
||||
<SignalMarkers
|
||||
chartRef={chartRef}
|
||||
candleSeriesRef={candleSeriesRef}
|
||||
signals={signals}
|
||||
visible={true}
|
||||
/>
|
||||
|
||||
<ICTConceptsOverlay
|
||||
chartRef={chartRef}
|
||||
ictConcepts={ictConcepts}
|
||||
visible={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## API Backend
|
||||
|
||||
Los componentes esperan que el backend exponga el siguiente endpoint:
|
||||
|
||||
```
|
||||
GET /api/ml/predictions/:symbol/:timeframe
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"symbol": "EURUSD",
|
||||
"timeframe": "1h",
|
||||
"predictions": [
|
||||
{
|
||||
"timestamp": 1706400000000,
|
||||
"price": 1.0850,
|
||||
"confidence": 0.85,
|
||||
"type": "buy"
|
||||
}
|
||||
],
|
||||
"signals": [
|
||||
{
|
||||
"time": 1706400000000,
|
||||
"position": "belowBar",
|
||||
"color": "#10b981",
|
||||
"text": "BUY",
|
||||
"shape": "arrowUp"
|
||||
}
|
||||
],
|
||||
"ictConcepts": [
|
||||
{
|
||||
"type": "OrderBlock",
|
||||
"timeStart": 1706400000000,
|
||||
"timeEnd": 1706403600000,
|
||||
"priceTop": 1.0860,
|
||||
"priceBottom": 1.0840
|
||||
}
|
||||
],
|
||||
"generatedAt": "2026-01-28T10:00:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
## Notas
|
||||
|
||||
- Los componentes usan TanStack Query para caché automático (60s stale time)
|
||||
- Las timestamps deben estar en milisegundos
|
||||
- Los overlays se limpian automáticamente al desmontar
|
||||
- Los colores predeterminados son:
|
||||
- OrderBlock: Azul (#3b82f6)
|
||||
- FVG: Amarillo (#fbbf24)
|
||||
- Liquidity: Naranja (#f97316)
|
||||
@ -0,0 +1,71 @@
|
||||
/**
|
||||
* SignalMarkers Component
|
||||
* Renders buy/sell signal markers on the trading chart
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { IChartApi, ISeriesApi, Time, SeriesMarker } from 'lightweight-charts';
|
||||
import type { SignalMarker } from '../../../../../types/mlOverlay.types';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
export interface SignalMarkersProps {
|
||||
chartRef: React.RefObject<IChartApi>;
|
||||
candleSeriesRef: React.RefObject<ISeriesApi<'Candlestick'>>;
|
||||
signals: SignalMarker[];
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Helper Functions
|
||||
// ============================================================================
|
||||
|
||||
function convertToLightweightMarkers(signals: SignalMarker[]): SeriesMarker<Time>[] {
|
||||
return signals.map((signal) => ({
|
||||
time: (signal.time / 1000) as Time,
|
||||
position: signal.position,
|
||||
color: signal.color,
|
||||
shape: signal.shape,
|
||||
text: signal.text,
|
||||
}));
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Component
|
||||
// ============================================================================
|
||||
|
||||
export const SignalMarkers: React.FC<SignalMarkersProps> = ({
|
||||
chartRef,
|
||||
candleSeriesRef,
|
||||
signals,
|
||||
visible = true,
|
||||
}) => {
|
||||
const markersSetRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!chartRef.current || !candleSeriesRef.current || !visible || signals.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const candleSeries = candleSeriesRef.current;
|
||||
|
||||
// Convert and set markers
|
||||
const markers = convertToLightweightMarkers(signals);
|
||||
candleSeries.setMarkers(markers);
|
||||
markersSetRef.current = true;
|
||||
|
||||
return () => {
|
||||
// Clear markers on cleanup
|
||||
if (markersSetRef.current && candleSeriesRef.current) {
|
||||
candleSeriesRef.current.setMarkers([]);
|
||||
markersSetRef.current = false;
|
||||
}
|
||||
};
|
||||
}, [chartRef, candleSeriesRef, signals, visible]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default SignalMarkers;
|
||||
13
src/modules/trading/components/charts/overlays/index.ts
Normal file
13
src/modules/trading/components/charts/overlays/index.ts
Normal file
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Chart Overlays - Barrel Export
|
||||
* Exports all ML chart overlay components
|
||||
*/
|
||||
|
||||
export { MLPredictionOverlay } from './MLPredictionOverlay';
|
||||
export type { MLPredictionOverlayProps } from './MLPredictionOverlay';
|
||||
|
||||
export { SignalMarkers } from './SignalMarkers';
|
||||
export type { SignalMarkersProps } from './SignalMarkers';
|
||||
|
||||
export { ICTConceptsOverlay } from './ICTConceptsOverlay';
|
||||
export type { ICTConceptsOverlayProps } from './ICTConceptsOverlay';
|
||||
106
src/types/mlOverlay.types.ts
Normal file
106
src/types/mlOverlay.types.ts
Normal file
@ -0,0 +1,106 @@
|
||||
/**
|
||||
* ML Overlay Types
|
||||
* Type definitions for ML predictions overlays on trading charts
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// ML Prediction Types
|
||||
// ============================================================================
|
||||
|
||||
export type PredictionType = 'buy' | 'sell' | 'neutral';
|
||||
|
||||
export interface MLPrediction {
|
||||
timestamp: number;
|
||||
price: number;
|
||||
confidence: number;
|
||||
type: PredictionType;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Signal Marker Types
|
||||
// ============================================================================
|
||||
|
||||
export type MarkerPosition = 'aboveBar' | 'belowBar';
|
||||
export type MarkerShape = 'arrowUp' | 'arrowDown' | 'circle';
|
||||
|
||||
export interface SignalMarker {
|
||||
time: number;
|
||||
position: MarkerPosition;
|
||||
color: string;
|
||||
text: string;
|
||||
shape: MarkerShape;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ICT Concept Types
|
||||
// ============================================================================
|
||||
|
||||
export type ICTConceptType = 'OrderBlock' | 'FVG' | 'Liquidity';
|
||||
|
||||
export interface ICTConcept {
|
||||
type: ICTConceptType;
|
||||
timeStart: number;
|
||||
timeEnd: number;
|
||||
priceTop: number;
|
||||
priceBottom: number;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Overlay Configuration Types
|
||||
// ============================================================================
|
||||
|
||||
export interface MLOverlayConfig {
|
||||
showPredictions: boolean;
|
||||
showSignals: boolean;
|
||||
showICTConcepts: boolean;
|
||||
predictionLineColor: string;
|
||||
predictionLineWidth: number;
|
||||
signalColors: {
|
||||
buy: string;
|
||||
sell: string;
|
||||
};
|
||||
ictColors: {
|
||||
OrderBlock: string;
|
||||
FVG: string;
|
||||
Liquidity: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const DEFAULT_OVERLAY_CONFIG: MLOverlayConfig = {
|
||||
showPredictions: true,
|
||||
showSignals: true,
|
||||
showICTConcepts: true,
|
||||
predictionLineColor: '#3b82f6',
|
||||
predictionLineWidth: 2,
|
||||
signalColors: {
|
||||
buy: '#10b981',
|
||||
sell: '#ef4444',
|
||||
},
|
||||
ictColors: {
|
||||
OrderBlock: '#3b82f6',
|
||||
FVG: '#fbbf24',
|
||||
Liquidity: '#f97316',
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// API Response Types
|
||||
// ============================================================================
|
||||
|
||||
export interface MLPredictionResponse {
|
||||
symbol: string;
|
||||
timeframe: string;
|
||||
predictions: MLPrediction[];
|
||||
signals: SignalMarker[];
|
||||
ictConcepts: ICTConcept[];
|
||||
generatedAt: string;
|
||||
}
|
||||
|
||||
export interface MLOverlayData {
|
||||
predictions: MLPrediction[];
|
||||
signals: SignalMarker[];
|
||||
ictConcepts: ICTConcept[];
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
lastUpdated: string | null;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user