TakeProfit — разбор технологии графиков

TL;DR

График — это собственный движок поверх PixiJS v7, рисующий свечи WebGL2-инстансингом. Данные идут не по REST и не по сырому WebSocket, а через Connect-ES / gRPC-web на Protobuf, а стримы держит SharedWorker, общий для всех вкладок.

рендер

PixiJS v7 · WebGL2

Инстансированные draw-call'ы для свечей/серий. Это и есть заявленные «первые WebGL-графики».

данные

Connect / gRPC-web

Бинарный Protobuf (@bufbuild + connect-web) к Go-бэкенду. 18 сервисов.

стриминг

SharedWorker

Server-streaming, мультиплекс между вкладками, ордербук snapshot+delta, авто-reconnect.

каркас

SvelteKit

SSR + хэшированные immutable-чанки. График управляется Svelte-сторами.

скрипты

Indie® DSL

Python-подобный язык, редактор на CodeMirror 6 с кастомным языковым режимом.

Anthropic + MCP

Встроенный AI-ассистент (bring-your-own-key) и MCP-сервер платформы.

Архитектура потока данных

От котировок до пикселей на canvas — путь, который проходит каждая свеча.

🕯️

Time-series на лету. Свечи не пред-нарезаны: бэкенд отдаёт сырые котировки, а CandleOffsetApi + ExtrapolationApi собирают бары любого таймфрейма (вплоть до секундных и кастомных вроде 7 минут) с offset-пагинацией. Это их «in-house time series engine».

Чарт-движок verified

Главное в разборе. Весь движок и Pixi лежат в одном бандле BFwNmJvl.js; в нём же — GLSL-шейдеры и геометрия серий.

⚡

WebGL2 поверх PixiJS v7

Рендер-слой — PixiJS 7 (@pixi/core, @pixi/math, @pixi/unsafe-eval). Контекст webgl2 с откатом на webgl.

сигнатуры: PREFER_ENV · checkMaxIfStatementsInShader · drawElementsInstancedANGLE · ADAPTER.createCanvas · версии 7.0.0 / 7.1.0 / 7.2.0

🧩

Свой движок с TradingView-подобным API

Поверх Pixi — собственный движок. Поверхность API напоминает lightweight-charts (series, .options().priceScaleId, renderedSeries), но рендер GPU-шный, не Canvas2D. Типы серий: candle, histogram, line, area, baseline.

строки: $candleStore · $chartState · candleBodyVisible · histogramPlotStyle · areaPlotConfig

🚀

Instanced rendering — ядро производительности

Свечи рисуются инстансингом: одна геометрия, буфер инстансов, один draw-call на тысячи баров. Отсюда «60 fps на плотных графиках» и отсутствие фризов при потоке обновлений.

instanceBuffer · instanceCount · instanceGeometry · drawArraysInstanced / drawElementsInstanced · VertexArrayObject · interleaved buffers

🎨

Инлайн GLSL-шейдеры

Шейдеры зашиты в бандл. Отдельные шейдер-наборы есть и в D0l-8yL0.js / CZKv6HDW.js — вероятно Order Flow Bubbles и Market Depth (тоже Pixi/WebGL).

GLSL: precision highp float · gl_Position · uniform1/2/3 · createShader

Слой данных · Protobuf-сервисы verified

Фронт общается с бэкендом через Connect-ES (@bufbuild/protobuf + connect-web, упоминается и grpc-web), бинарный формат. Полный список сервисов вытащен из typeName в коде.

Protobuf service (typeName)	Назначение
marketdata.external.candle.v1.CandleOffsetApi	Свечи по offset (поля: offsets, bars, bar, candle)
marketdata.external.candle.v1.ExtrapolationApi	Экстраполяция / достройка таймфреймов
marketdata.external.quote.v1.QuoteApi	Котировки (сырые тики)
marketdata.order_book.v1.OrderBookApi	Биржевой стакан (DOM / Market Depth)
marketdata.external.fundamental.v2.FundamentalApi	Фундаментальные данные
marketdata.external.ratio.v2.CatalogueApi	Каталог коэффициентов / метрик
reference.external.exchange.v1.ExchangeApi	Справочник бирж
reference.external.industry.v1.IndustryApi	Справочник отраслей
reference.external.security.v1.SecurityInfoApi	Справочник инструментов
screener.external.v1.SearcherApi	Поиск инструментов
screener.external.v2.StockScreenerApi	Скринер акций
screener.external.v2.CategoryApi	Категории скринера
trading.trading.v1.TradingApi	Торговля (ордера, позиции)
alerts.tpi_alerts.v1.AlertsApi	Алерты
alerts.tpi_notifications.v1.NotificationsApi	Уведомления
alerts.tpi_popup_sender.v1.PopupSenderApi	Pop-up уведомления
indicator.code_migrator.v1.CodeMigratorApi	Миграция версий Indie-кода
telegram_connector.v1.TelegramConnectorApi	Интеграция с Telegram

🧵

Стриминг живёт в SharedWorker. OrderBookStreamManager.worker и PlaceOrderDataStreamManager.worker держат Connect server-streams, шарят их между вкладками, переподключаются и восстанавливают стакан из snapshot + delta (мерж bids по убыванию / asks по возрастанию). Сырого new WebSocket в коде нет — стриминг идёт поверх Connect/HTTP.

Эндпоинты и окружения verified

Конфиг окружений найден прямо в воркере (local / dev / stage / pre-prod / prod).

Назначение	Prod-хост	Путь / заметка
Market data	backend.takeprofit.com	путь /market-data/ · dev: backend.dev.tpinf.in
Trading	trading.takeprofit.com	путь /market-data-trading/
Auth	api.stytch.takeprofit.com	Stytch + Google OAuth
Media	media-files.takeprofit.com	пользовательские файлы
CDN	cdn.takeprofit.com	ассеты, иконки инструментов /reference/prod/icons/
Analytics	a.takeprofit.com	self-proxied PostHog
Брокеры (iframe)	*.widget.takeprofit.com	lime · j2t · ilotcos (order + portfolio)

Фронт-стек verified

framework

SvelteKit

SSR, /_app/immutable/, __sveltekit_*. Не React (LeadIQ ошибается) — в коде Svelte.

auth

Stytch + Google

OAuth-флоу через api.stytch.takeprofit.com.

analytics

PostHog (self-host)

recorder, surveys, dead-clicks, exception-autocapture + Sentry, Reddit pixel, Termly.

render

PixiJS v7

WebGL2-движок графиков (см. раздел 03).

editor

CodeMirror 6

@codemirror/state + кастомный indieLang, тема oneDark.

workers

SharedWorker

Стрим-менеджеры для ордербука и размещения ордеров.

Смежная технология

scripting · verified

Indie® DSL

Python-подобный язык для индикаторов. Редактор CodeMirror 6 с кастомным режимом indieLang. IndieStreamDataInfo связывает вывод индикатора с сериями графика; CodeMigratorApi мигрирует версии кода.

ai · verified

AI-ассистент + MCP

Встроенный чат, bring-your-own-key, провайдер Anthropic (ai_chat_api_key_provider_anthropic). MCP-сервер платформы интегрируется с Claude Code CLI / Cursor / VSCode.

brokers · verified

Брокеры через iframe

Order/portfolio-виджеты сторонних брокеров встроены iframe'ами: lime.widget, j2t.widget, ilotcos.widget. DEX-фиды: Hyperliquid, Aster, Uniswap.

UI · verified

Виджетный workspace

Drag-and-drop сетка виджетов: Chart, Screener, Watchlist, Market Depth, Indie Code Editor, Backtesting, Financials, Feed, Notes. Widget Linking синхронизирует символ/таймфрейм между графиками.

screenshot · takeprofit.com/platform — экран выбора workspace (гостевой режим, до логина)

Backend reported

Это со слов компании (пресса/LinkedIn), напрямую в клиентском коде не видно — но клиентский Protobuf-контракт косвенно согласуется.

Go-микросервисы, общение по gRPC / Protobuf, монорепо на Bazel.
Проприетарная БД свечей, оптимизированная под candlestick-данные; high-load real-time стриминг.
Hardware-accelerated рендер: WebGL + WASM с оптимизациями на C/C++ — заявлено маркетингом (см. пробелы).
Компания: основатель — экс-CMO TradingView, привлечено ~$10M seed.

Честные пробелы unverified

Что я НЕ смог подтвердить или не измерял — чтобы разбор не выдавал желаемое за факт.

🧱

Клиентский WASM не найден

Маркетинг заявляет «WebGL + WASM на C/C++», но на доступном маршруте .wasm не грузится и нет WebAssembly.instantiate (только Sentry/core-js feature-detection). WASM либо серверный, либо лениво грузится внутри залогиненного чарт/IDE-виджета, либо преувеличен.

📊

Живой рендер не замерян

Реальный FPS, draw-calls на кадр, Order Flow Bubbles — не измерял: терминал за логином Stytch, аккаунт не использовал.

🔌

WS vs Connect-streaming

Сырого new WebSocket нет → вывод про Connect server-streaming сделан по косвенным признакам, не на 100% для каждого фида.

🗄️

Backend — со слов прессы

Go / Bazel / БД свечей напрямую не верифицированы. Подтверждён только клиентский Protobuf-контракт (что согласуется с Go + Connect).