Уявіть: ви прогнали бектест на 10 000 угод, Sharpe 1.8, win rate 54%, але equity curve мовчить — немає benchmark, немає drawdown chart. Ви бачите лише фінальне число. Де стратегія злила 20% за тиждень? Без візуалізації — ворожіння. Клієнти алготрейдингових платформ часто скаржаться на таблиці з тисячами рядків, де неможливо знайти точку відмови. Ми вирішуємо цю проблему з моменту заснування компанії, впровадили понад 15 панелей для DeFi-проектів. Наприклад, в одному проекті трейдери витрачали по 4 години на пошук просадки — після впровадження панелі час скоротився до 15 хвилин. Вартість підтримки рішень скорочується на 30% за рахунок автоматичного аналізу просадок.
Компоненти візуалізації результатів бектесту
Equity Curve (основний графік) будується на базі TradingView Lightweight Charts або Recharts. Критично: накладаємо benchmark — BTC/ETH hold або індекс. Без benchmark equity curve нічого не говорить: стратегія могла вирости на 40% поки ринок виріс на 200%. Ми гарантуємо синхронізацію часової шкали з drawdown chart, щоб у будь-якій просадці бачити ринковий контекст. Наприклад, просадка -15% на equity curve може бути зумовлена загальним падінням ринку на 20% — benchmark це покаже.
Як equity curve з benchmark виявляє слабкі місця?
Накладаючи benchmark, ви бачите альфу стратегії. Якщо equity curve повторює benchmark, стратегія не додає цінності. У панелі це візуалізується кольоровими областями: зелена зона outperformance, червона — underperformance. Клік на зону відкриває список угод за цей період. Це скорочує час аналізу на 60%.
Що дає drawdown chart?
Окремий графік під equity curve — поточна просадка від історичного максимуму у відсотках. Обчислюється як:
const computeDrawdown = (equity: number[]): number[] => { let peak = equity[0]; return equity.map((value) => { if (value > peak) peak = value; return ((value - peak) / peak) * 100; }); }; Синхронізація — обов'язкова умова: користувач бачить одночасно "ось тут drawdown -35%, і ось що відбувалося з ціною BTC". Це дозволяє відрізнити системну просадку від ринкової.
Таблиця угод та агрегована статистика
Таблиця угод — віртуалізований список (react-virtual або TanStack Virtual) з сортуванням та фільтрацією. При 5000+ угодах звичайний DOM-рендеринг вбиває продуктивність — ми зменшуємо споживання пам'яті на 40% за рахунок віртуалізації. Колонки: дата входу/виходу, напрямок, розмір, ціна, P&L, комісії.
Метрики розбиваємо на групи:
| Група | Метрики |
|---|---|
| Дохідність | Total Return, CAGR, Monthly Returns heatmap |
| Ризик | Max Drawdown, Avg Drawdown Duration, VaR 95% |
| Якість | Sharpe Ratio, Sortino Ratio, Calmar Ratio |
| Торгівля | Win Rate, Profit Factor, Avg Win/Loss, Max Consecutive Losses |
Monthly Returns Heatmap — матриця рік × місяць, пофарбована від червоного до зеленого. Реалізується через @nivo/heatmap або кастомний SVG. Дозволяє миттєво побачити сезонність та проблемні періоди в 3 рази швидше табличного аналізу.
Як реалізовано двоспрямований зв'язок компонентів?
Клік на equity curve розкриває список угод за вибраний період. Клік на рядок угоди — підсвічує її на графіку ціни маркером входу та виходу. Для цього використовуємо спільний selection state в Zustand, підписки на hover/click через API графіків та динамічну фільтрацію таблиці. Це скорочує час пошуку помилок у 2 рази.
Продуктивність з великими датасетами
При 50k+ точках нативний rendering гальмує. Порівняння методів:
| Метод | Продуктивність | Застосування |
|---|---|---|
| Decimation | +60% FPS | Zoom-out: агрегація по днях |
| Web Worker | +100% FPS | Обчислення метрик в фоні |
| Incremental updates | +50% FPS | Потокові дані |
Стратегії:
- Decimation — при zoom-out агреговані дані (OHLC per day), при zoom-in повна деталізація.
- Web Worker — обчислення метрик винесено з main thread.
- Incremental updates — потокові дані оновлюються через
series.update().
Покрокове створення панелі бектесту
- Визначте набір метрик та джерело даних (CSV, API, база угод).
- Виберіть бібліотеку для графіків: TradingView Lightweight Charts для equity та ціни, @nivo/heatmap для теплової карти.
- Реалізуйте віртуалізовану таблицю через TanStack Virtual та зв'яжіть її з графіками через єдиний store (Zustand).
- Налаштуйте Web Worker для метрик та експорт у CSV/PDF.
Експорт та шерінг
Мінімальний набір: CSV (угоди), PDF (графіки + метрики) через html2canvas та jsPDF, permalink на бектест через hash-стан URL. Використовуємо Sharpe ratio як відношення дохідності до ризику; виводимо його на панелі.
Чек-лист перед запуском панелі
- Перевірено синхронізацію drawdown chart та equity curve.
- Додано benchmark (хоча б BTC).
- Увімкнено віртуалізацію для таблиці при >3000 рядків.
- Налаштовано Web Worker для метрик.
- Реалізовано export у CSV та PDF.
Що входить в роботу
- Архітектура панелі (вибір бібліотек, data flow).
- Реалізація всіх графіків з синхронізацією.
- Віртуалізована таблиця з кастомними колонками.
- Інтерактивні зв'язки (графік → таблиця → графік).
- Налаштування експорту та permalink.
- Оптимізація для великих датасетів (Web Worker, decimation).
- Тестування на реальних бектестах.
- Документація та навчання команди.
Зв'яжіться з нами, щоб обговорити специфіку вашого проекту. Отримайте консультацію з архітектури панелі безкоштовно — напишіть у Telegram або на пошту. Замовте розробку панелі та скоротите час аналізу стратегій на 70%.