Реализация отображения результатов бэктестинга в мобильном приложении

Реализация отображения результатов бэктестинга в мобильном приложении

Мы сталкиваемся с ситуацией: бэктест запускается часами на сервере, перебирая исторические данные. Мобильное приложение получает готовые результаты и должно показать их так, чтобы трейдер понял: стратегия работает или нет, при каких условиях просаживается, насколько хуже реальной торговли. Наши инженеры имеют 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+ точек за год поминутного бэктеста. Процесс загрузки и отображения состоит из трёх этапов:

1. Загрузка summary и equity curve (основной экран) — сокращает время загрузки на 40% по сравнению с полной выгрузкой.
2. Применение LTTB-алгоритма для downsampling кривой до 500–1000 точек.
3. Рендеринг графиков с помощью 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 раз быстрее. При этом визуальное различие между кривыми незаметно для глаза. Мы гарантируем плавный скроллинг даже на бюджетных устройствах.

Monthly Breakdown

Таблица по месяцам — быстрый способ увидеть сезонность стратегии:

Ячейки 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. Это позволяет мгновенно оценить, какой набор параметров лучше. Пример таблицы сравнения:

Что входит в работу

• Дашборд summary с ключевыми метриками
• Equity curve с LTTB-downsampling для производительности
• Drawdown chart
• Monthly breakdown таблица с цветовой кодировкой
• История сделок с пагинацией
• Экран сравнения двух бэктестов (опционально)

Мы реализуем всё под ключ: от проектирования интерфейса до интеграции с вашим бэкендом. Наши инженеры имеют 5+ лет опыта в трейдинговых приложениях — доверьте визуализацию профессионалам. Оценим объём работ после анализа требований. Получите консультацию — мы подберём оптимальный набор визуализаций под ваш проект.

Сроки

5–8 рабочих дней в зависимости от набора графиков и наличия сравнения. Стоимость рассчитывается индивидуально. Свяжитесь с нами для обсуждения деталей — мы поможем выбрать оптимальный набор визуализаций.