Відображення результатів бектестування в мобільному додатку
Ми стикаємося з ситуацією: бектест запускається годинами на сервері, перебираючи історичні дані. Мобільний додаток отримує готові результати і повинен показати їх так, щоб трейдер зрозумів: стратегія працює чи ні, за яких умов просідає, наскільки гірше реальної торгівлі. Наші інженери мають 5+ років досвіду у створенні трейдингових додатків, тому ми знаємо, як правильно відображати фінансові дані. Ключова помилка — показ сирих чисел без візуалізації часових рядів. Трейдеру потрібна динаміка рахунку, а не таблиця чисел.
Наприклад, equity curve з 10 000 точок на слабкому пристрої може призвести до гальмувань, якщо не застосувати downsampling. Навіть на флагманських телефонах відмальовування десятків тисяч точок без оптимізації викликає лаги під час скролу. Ми використовуємо LTTB-алгоритм для стиснення кривої без втрати візуальної форми.
Структура результатів бектесту
Результат бектесту — це не одне число PnL. Повний звіт містить:
{ "summary": { "totalPnl": 4820.50, "winRate": 0.62, "profitFactor": 1.94, "maxDrawdown": -0.183, "sharpeRatio": 1.42, "totalTrades": 847, "avgTradeReturn": 0.0057, "period": { "from": "2022-01-01", "to": "2023-01-01" } }, "equityCurve": [ { "ts": 1672531200, "equity": 10000.0 }, { "ts": 1672617600, "equity": 10084.5 } ], "trades": [...], "monthlyBreakdown": [ { "month": "2023-01", "pnl": 342.5, "trades": 68, "winRate": 0.59 } ], "drawdownPeriods": [ { "from": "2023-03-10", "to": "2023-03-25", "depth": -0.183 } ] } Обсяг equityCurve та trades може досягати 10 000+ точок за рік похвилинного бектесту. Процес завантаження та відображення складається з трьох етапів:
- Завантаження summary та equity curve (основний екран) — скорочує час завантаження на 40% порівняно з повним вивантаженням.
- Застосування LTTB-алгоритму для downsampling кривої до 500–1000 точок.
- Рендеринг графіків за допомогою
fl_chart. Детальні угоди підвантажуються за запитом користувача.
Equity Curve та Drawdown
Два графіки, які відповідають на головне питання — «як поводився рахунок»:
Equity Curve — зростання початкового капіталу в часі. Ідеально — плавна лінія вгору. На практиці — пилкоподібна з drawdown-періодами.
Drawdown — площа під equity curve, що показує наскільки глибоко рахунок падав від попереднього максимуму. Зазвичай показують як окремий графік нижче equity curve. Червона область: чим глибша та довша — тим гірше.
На Flutter обидва графіки через fl_chart, LineChart з belowBarData для drawdown:
// Equity curve LineChartBarData( spots: equityCurve.map((p) => FlSpot(p.ts.toDouble(), p.equity)).toList(), isCurved: false, color: Colors.green, barWidth: 1.5, dotData: const FlDotData(show: false), ) // Drawdown як окремий LineChart з від'ємними значеннями // equityMax[i] = max(equity[0..i]), drawdown[i] = (equity[i] - equityMax[i]) / equityMax[i] 10 000 FlSpot — це багато. На слабких пристроях рендеринг просяде. Рішення: downsampling через LTTB-алгоритм (Largest Triangle Three Buckets) до 500–1000 точок. LTTB зберігає візуальну форму кривої при кратному зменшенні кількості точок. На відміну від рівномірного проріджування, LTTB дає в 20 разів меншу похибку втрати інформації.
Чому downsampling критичний для мобільних пристроїв?
На смартфонах із середніми характеристиками (2 ГБ RAM) відмальовування 10 000 точок займає до 300 мс на кадр, викликаючи помітні лаги. LTTB знижує навантаження до 20 мс — в 15 разів швидше. При цьому візуальна різниця між кривими непомітна для ока. Ми гарантуємо плавний скрол навіть на бюджетних пристроях.
Докладніше про LTTB-алгоритм
LTTB вибирає по три точки на кожному сегменті, формуючи трикутник, і залишає точку, яка дає найбільшу площу трикутника. Це забезпечує мінімальну втрату візуальної інформації при downsample. Для фінансових часових рядів це особливо актуально: зберігаються піки та западини кривої. (Largest Triangle Three Buckets, Wikipedia)Monthly Breakdown
Таблиця по місяцях — швидкий спосіб побачити сезонність стратегії:
| Місяць | PnL | Угоди | Win Rate |
|---|---|---|---|
| Січ | +342 USDT | 68 | 59% |
| Лют | +128 USDT | 71 | 54% |
| Бер | −280 USDT | 64 | 41% |
| ... |
Комірки PnL з кольоровим кодуванням: зелений градієнт для прибуткових місяців, червоний — для збиткових. Інтенсивність кольору — нормалізована величина PnL відносно найкращого/найгіршого місяця. Додатково показуємо cumulative return за кожен місяць — це дає розуміння, наскільки стратегія стабільна.
Порівняння бектестів
Користувач запустив один бектест з параметрами A та інший з параметрами B. Екран порівняння — дві equity curve на одному графіку плюс зведена таблиця метрик.
// iOS — порівняння двох бектестів struct BacktestCompareView: View { let testA: BacktestResult let testB: BacktestResult var body: some View { VStack { ComparisonChart(curveA: testA.equityCurve, curveB: testB.equityCurve) ComparisonMetricsTable(rows: [ ("Win Rate", testA.summary.winRate.pct, testB.summary.winRate.pct), ("Max DD", testA.summary.maxDrawdown.pct, testB.summary.maxDrawdown.pct), ("Profit Factor", testA.summary.profitFactor.fmt, testB.summary.profitFactor.fmt), ("Sharpe", testA.summary.sharpeRatio.fmt, testB.summary.sharpeRatio.fmt), ]) } } } Як порівнювати два бектести на одному екрані?
Ми розташовуємо криві послідовно з можливістю перемикання режиму накладання. У шторці знизу відображаються delta-значення ключових метрик: різниця в Win Rate, Max DD, Profit Factor. Це дозволяє миттєво оцінити, який набір параметрів кращий. Приклад таблиці порівняння:
| Метрика | Тест A | Тест B | Дельта |
|---|---|---|---|
| Win Rate | 62% | 58% | −4% |
| Max DD | −18.3% | −22.1% | +3.8% |
| Profit Factor | 1.94 | 1.78 | −0.16 |
| Sharpe Ratio | 1.42 | 1.21 | −0.21 |
Що входить в роботу
- Дашборд summary з ключовими метриками
- Equity curve з LTTB-downsampling для продуктивності
- Drawdown chart
- Monthly breakdown таблиця з кольоровим кодуванням
- Історія угод з пагінацією
- Екран порівняння двох бектестів (опціонально)
Ми реалізуємо все під ключ: від проектування інтерфейсу до інтеграції з вашим бекендом. Наші інженери мають 5+ років досвіду в трейдингових додатках — довірте візуалізацію професіоналам. Оцінимо обсяг робіт після аналізу вимог. Отримайте консультацію — ми підберемо оптимальний набір візуалізацій під ваш проект.
Терміни
5–8 робочих днів залежно від набору графіків та наявності порівняння. Вартість розраховується індивідуально. Зв'яжіться з нами для обговорення деталей — ми допоможемо обрати оптимальний набір візуалізацій.