Інтеграція TradingView Lightweight Charts у мобільне приложение біржі
TradingView Lightweight Charts — JavaScript-бібліотека для фінансових графіків вагою ~45KB gzip. Її використовують у production Coinbase, OKX, Gate.io. На мобільному — запускається всередину WebView, що дає всі можливості бібліотеки без нативної реалізації candlestick з нуля.
Архітектура: WebView-мост
Інтеграція будується на двостороннему мосту: нативне приложение відправляє дані в WebView через JavaScript, WebView сигналізує зворотно про подіїї (tap на свічу, crosshair movement).
На Flutter — webview_flutter (офіціальна від Google):
// Інініціалізація WebViewController
late final WebViewController _webViewController;
@override
void initState() {
super.initState();
_webViewController = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel(
'FlutterBridge',
onMessageReceived: (message) {
final data = jsonDecode(message.message);
if (data['type'] == 'crosshair') {
_onCrosshairUpdate(data['candle']);
}
},
)
..loadFlutterAsset('assets/chart/index.html');
}
// Відправка даних в WebView
Future<void> setChartData(List<Candle> candles) async {
final json = jsonEncode(candles.map((c) => {
'time': c.timestamp ~/ 1000, // Lightweight Charts очікує секунди
'open': c.open,
'high': c.high,
'low': c.low,
'close': c.close,
}).toList());
await _webViewController.runJavaScript('window.setData($json)');
}
HTML/JS частина: інініціалізація та API
Мінімальний assets/chart/index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #131722; overflow: hidden; }
#chart { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="chart"></div>
<script src="lightweight-charts.standalone.production.js"></script>
<script>
const chart = LightweightCharts.createChart(document.getElementById('chart'), {
layout: { background: { color: '#131722' }, textColor: '#d1d4dc' },
grid: { vertLines: { color: '#1e2130' }, horzLines: { color: '#1e2130' } },
crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
rightPriceScale: { borderColor: '#2a2e39' },
timeScale: { borderColor: '#2a2e39', timeVisible: true, secondsVisible: false },
});
const candleSeries = chart.addCandlestickSeries({
upColor: '#26a69a', downColor: '#ef5350',
borderDownColor: '#ef5350', borderUpColor: '#26a69a',
wickDownColor: '#ef5350', wickUpColor: '#26a69a',
});
const volumeSeries = chart.addHistogramSeries({
color: '#26a69a',
priceFormat: { type: 'volume' },
priceScaleId: 'volume',
scaleMargins: { top: 0.8, bottom: 0 },
});
// Підписка на crosshair — відправляємо дані в Flutter
chart.subscribeCrosshairMove(param => {
if (param.seriesData.has(candleSeries)) {
const candle = param.seriesData.get(candleSeries);
FlutterBridge.postMessage(JSON.stringify({ type: 'crosshair', candle }));
}
});
// Викликається з Flutter
window.setData = function(candles) {
candleSeries.setData(candles);
// Volume окремо
const volumeData = candles.map(c => ({
time: c.time,
value: c.volume || 0,
color: c.close >= c.open ? '#26a69a44' : '#ef535044',
}));
volumeSeries.setData(volumeData);
chart.timeScale().fitContent();
};
window.updateLastCandle = function(candle) {
candleSeries.update(candle);
};
window.setTimeframe = function(timeframe) {
// Запит нових даних обробляється на Flutter стороні
FlutterBridge.postMessage(JSON.stringify({ type: 'timeframe_change', timeframe }));
};
</script>
</body>
</html>
Real-time оновлення
WebSocket тік → Flutter → виклик updateLastCandle у WebView:
void onTickReceived(Tick tick) {
_updateLocalCandle(tick);
final candleJson = jsonEncode({
'time': _lastCandle.timestamp ~/ 1000,
'open': _lastCandle.open,
'high': _lastCandle.high,
'low': _lastCandle.low,
'close': _lastCandle.close,
});
_webViewController.runJavaScript('window.updateLastCandle($candleJson)');
}
candleSeries.update() у Lightweight Charts оновлює тільки останню свічу без перерисовки всього графіка. Це оптимізовано — бібліотека робить це правильно.
Підводні камені інтеграції
Viewport meta. Без maximum-scale=1.0 iOS Safari включає користувацький zoom при подвійному тапі — інтерфейс розползається. На Android — WebSettings.setSupportZoom(false).
Білий flash при завантаженні. WebView рендерить білий фон до завантаження HTML. Рішення — backgroundColor у WebView збігається з фоном графіка (#131722), та показуємо CircularProgressIndicator поверх WebView до отримання onPageFinished.
Затримка першого рендеру. WebView інініціалізується довше нативних віджетів — 200-500ms. Для біржі це неприємно. Рішення: інініціалізувати WebView заранее (при відкритті екрана тикера, не при переходу на екран графіка), прогрівати через offscreen WebView.
Keyboard та Focus. WebView перехоплює focus — нативна клавіатура та жести можуть конфліктувати. Явно відключаємо text input у WebView: webViewController.setOnPlatformPermissionRequest та не включаємо JavaScript form elements.
JavaScript Bridge на iOS. На iOS WKWebView (під капотом WebView) асинхронно доставляє повідомлення з JS. При швидкому потоці тиків (>10/сек) — черга повідомлень може створювати lag. Рішення: батчинг оновлень на Flutter стороні, відправка не кожного тика, а накопленого оновлення кожні 100ms.
Технічні індикатори
Lightweight Charts підтримує додавання довільних line series поверх основного графіка. MA(20) — обчислюємо на Flutter, передаємо масивом у addLineSeries().setData():
List<Map> calculateMA(List<Candle> candles, int period) {
final result = <Map>[];
for (var i = period - 1; i < candles.length; i++) {
final avg = candles.sublist(i - period + 1, i + 1)
.map((c) => c.close)
.reduce((a, b) => a + b) / period;
result.add({'time': candles[i].timestamp ~/ 1000, 'value': avg});
}
return result;
}
Що входить у роботу
- Настройка WebView з правильними параметрами для iOS та Android
- HTML/JS шаблон з Lightweight Charts, настройка теми та серій
- Двосторонній мост Flutter ↔ WebView
- Real-time оновлення через WebSocket
- Crosshair з відображенням OHLCV у нативній панелі Flutter
- Переключення таймфреймів
- Volume bars
- Базові індикатори (MA, EMA — за узгодженням)
Строки
Базова інтеграція з WebSocket та crosshair: 5–8 днів. Повнофункціональний екран з переключенням таймфреймів, індикаторами, адаптацією під iOS/Android: 2–3 тижні. Вартість розраховується індивідуально.