# 📊 Position Detail Report - Интеграция
## Обзор
Детальный отчет по позиции с real-time обновлениями, TradingView графиком и техническим анализом.
## Архитектура интеграции
### Компоненты
1. **PositionDetailReport.ts** - основной компонент отчета
- Расположение: `bybit-mcp/webui/src/components/PositionDetailReport.ts`
- Тип: TypeScript класс (Vanilla JS)
- Singleton: `positionDetailReport`
2. **Интеграция с TradingDashboard**
- Кнопка "📊 View Full Report" в детальной панели позиции
- Автоматическое открытие при клике
3. **Real-time обновления**
- Подписка на `tradingDataService` для обновлений позиции
- WebSocket для обновлений цены
- Автообновление каждые 5 секунд
### Структура данных
```typescript
interface PositionDetailData {
// Базовая информация о позиции
symbol: string;
side: 'Buy' | 'Sell';
size: number;
entry_price: number;
current_price: number;
unrealized_pnl: number;
unrealized_pnl_pct: number;
leverage?: number;
stop_loss?: number;
take_profit?: number;
time_in_trade?: string;
status?: 'healthy' | 'warning' | 'critical';
// Дополнительные данные
technicalAnalysis?: any; // Результат analyze_asset
marketData?: any; // Результат get_asset_price
riskMetrics?: {
risk_pct: number;
liquidation_distance: number;
margin_ratio: number;
};
}
```
## Использование
### Открытие отчета из TradingDashboard
```typescript
// В TradingDashboard уже интегрировано:
// При клике на позицию → кнопка "View Full Report" → открывает детальный отчет
```
### Программное открытие
```typescript
import { positionDetailReport } from '@/components/PositionDetailReport';
import { tradingDataService } from '@/services/tradingDataService';
// Получить позицию
const position = tradingDataService.getPosition('BTCUSDT');
// Открыть отчет
if (position) {
await positionDetailReport.openPosition(position);
}
```
### Закрытие отчета
```typescript
// Закрыть программно
positionDetailReport.close();
// Или нажать кнопку "✕ Закрыть" в sticky панели
// Или нажать Escape
```
## Функциональность
### 1. Sticky Position Panel
- Всегда видна при прокрутке
- Показывает: символ, направление, текущую цену, PnL
- Кнопка закрытия
### 2. TradingView График
- Полнофункциональный график
- Переключение таймфреймов: 15m, 1h, 4h, 1D
- Индикаторы: RSI, MACD, Volume
- Маркеры позиции: Entry, Current, SL, TP
### 3. Технический анализ
- Загружается через MCP tool `analyze_asset`
- Анализ на таймфреймах: 15m, 1h, 4h
- Показывает:
- Индикаторы (RSI, MACD, ADX)
- Сигналы (BUY/SELL/HOLD)
- Уровни поддержки/сопротивления
- Композитный сигнал
### 4. Рыночные данные
- Загружается через MCP tool `get_asset_price`
- Показывает:
- Текущая цена
- Изменение 24ч
- Объем 24ч
- High/Low 24ч
### 5. Риск-метрики
- Автоматический расчет:
- Риск позиции (% от баланса)
- Расстояние до ликвидации
- Использование маржи
## Real-time обновления
### Подписки
1. **Position updates** - через `tradingDataService.subscribe('position:SYMBOL')`
2. **Price updates** - через `websocketService.on('price_update')`
3. **Auto-refresh** - каждые 5 секунд
### Обновляемые элементы
- Sticky панель (цена, PnL)
- Position card (все метрики)
- Risk metrics (пересчет при изменении цены)
## Стили
Стили загружаются автоматически через `loadStyles()` метод.
Основные стили находятся в компоненте, дополнительные можно добавить в:
- `bybit-mcp/webui/src/styles/main.css`
- `bybit-mcp/webui/src/styles/trading-terminal.css`
## Интеграция в TradingTerminal
Для использования в TradingTerminal:
```typescript
// В TradingTerminal.ts
import { positionDetailReport } from './PositionDetailReport';
// При клике на позицию в терминале
private onPositionClick(position: Position): void {
positionDetailReport.openPosition(position);
}
```
## MCP Tools Используемые
1. **analyze_asset** - технический анализ
```typescript
await mcpClient.callTool('analyze_asset', {
symbol: 'BTCUSDT',
timeframes: ['15m', '1h', '4h'],
include_patterns: true
});
```
2. **get_asset_price** - рыночные данные
```typescript
await mcpClient.callTool('get_asset_price', {
symbol: 'BTCUSDT'
});
```
## Обработка ошибок
- При ошибке загрузки технического анализа - показывается сообщение
- При ошибке загрузки рыночных данных - показывается сообщение
- При ошибке инициализации TradingView - логируется в консоль
## Производительность
- Debounced обновления через `tradingDataService`
- Автообновление каждые 5 секунд (настраивается)
- TradingView виджет загружается только при открытии отчета
## Будущие улучшения
1. ✅ Real-time обновления графика
2. ✅ Интеграция с TradingDashboard
3. ⏳ Сохранение настроек графика
4. ⏳ Экспорт отчета в PDF
5. ⏳ История изменений позиции
6. ⏳ Уведомления о важных событиях
## Тестирование
1. Открыть TradingDashboard
2. Кликнуть на позицию
3. Нажать "📊 View Full Report"
4. Проверить:
- Загрузку графика
- Загрузку технического анализа
- Real-time обновления цены
- Обновление PnL
## Troubleshooting
### График не загружается
- Проверить консоль на ошибки
- Убедиться, что TradingView script загружен
- Проверить интернет соединение
### Технический анализ не загружается
- Проверить подключение к MCP серверу
- Проверить доступность tool `analyze_asset`
- Проверить консоль на ошибки
### Real-time обновления не работают
- Проверить WebSocket соединение
- Проверить подписки в `tradingDataService`
- Проверить консоль на ошибки
